Refactor Python output pane toolbar for improved layout and styling

GitOrigin-RevId: b6d838e5c9bd8023bf12df976dad0c50564a0b2f

services/web/frontend/js/features/ide-react/components/editor/python/python-output-pane.tsx

@@ -31,9 +31,9 @@ export default function PythonOutputPane() {
 
   return (
     <div className="ide-redesign-python-output-pane">
-      <OLButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
-        <div className="toolbar-pdf-left">
-          <div className="compile-button-group">
+      <OLButtonToolbar className="ide-redesign-python-output-pane-toolbar">
+        <div className="ide-redesign-python-output-pane-toolbar-left">
+          <div className="ide-redesign-python-output-pane-run-button-wrapper">
             <OLButton
               onClick={() => {
                 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'

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);
+}
+
+.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);
 
-  .compile-button-group {
-    border-radius: var(--ds-border-radius-300);
+  .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;
   }
 }