diff --git a/services/web/frontend/js/features/ide-react/components/editor/python/python-output-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/python/python-output-pane.tsx index 0a7f2f3bbf..36264e3ba5 100644 --- a/services/web/frontend/js/features/ide-react/components/editor/python/python-output-pane.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor/python/python-output-pane.tsx @@ -31,9 +31,9 @@ export default function PythonOutputPane() { return (
- -
-
+ +
+
{ if (status === 'running') { @@ -43,7 +43,7 @@ export default function PythonOutputPane() { } }} variant={status === 'running' ? 'danger' : 'primary'} - className="compile-button align-items-center py-0 px-3" + className="align-items-center py-0 px-3" disabled={status === 'loading'} aria-label={ status === 'running' diff --git a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss index 328bd5c682..805cdc6552 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss @@ -68,21 +68,43 @@ background-color: var(--ide-redesign-background); color: var(--ide-redesign-color); border-top: 1px solid var(--border-divider); +} - .compile-button-group { - border-radius: var(--ds-border-radius-300); +.ide-redesign-python-output-pane-toolbar { + display: flex; + align-items: center; + height: var(--toolbar-height); + border-bottom: 1px solid var(--toolbar-border-color); +} + +.ide-redesign-python-output-pane-toolbar-left { + display: flex; + align-items: center; + align-self: stretch; + gap: var(--spacing-02); +} + +.ide-redesign-python-output-pane-run-button-wrapper { + height: 24px; + background-color: var(--bg-accent-01); + border-radius: var(--ds-border-radius-300); + margin-left: var(--spacing-02); + + .btn-primary:hover { + z-index: auto; } +} - .ide-redesign-python-output-pane-toolbar-right { - flex: 1; - display: flex; - justify-content: flex-end; - align-items: center; - padding-right: var(--spacing-02); +.ide-redesign-python-output-pane-toolbar-right { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + align-self: stretch; + padding-right: var(--spacing-02); - .material-symbols { - font-size: 16px; - } + .material-symbols { + font-size: 16px; } }