Revert "Merge pull request #3818 from Agenta-AI/fix/ui-improvements-editor-sidebar"

jp-agenta · jp-agenta · commit e0394c5aeac5 · 2026-02-25T13:17:35.000+01:00
This reverts commit 3616e17, reversing changes made to ae99182.
diff --git a/web/oss/src/components/Editor/plugins/markdown/markdownPlugin.tsx b/web/oss/src/components/Editor/plugins/markdown/markdownPlugin.tsx
@@ -123,47 +123,20 @@ const MarkdownPlugin = ({id}: {id: string}) => {
         return editor.registerCommand(
             KEY_ENTER_COMMAND,
             (event) => {
-                let handled = false
-                editor.update(
-                    () => {
-                        const selection = $getSelection()
-                        if (!$isRangeSelection(selection)) return
-
-                        const anchorNode = selection.anchor.getNode()
-                        const topNode = anchorNode.getTopLevelElementOrThrow()
-
-                        if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
-                            event?.preventDefault()
-
-                            // Save scroll position before inserting text to prevent
-                            // the browser from auto-scrolling to the bottom
-                            const rootElement = editor.getRootElement()
-                            const scrollContainer = rootElement?.closest(
-                                ".agenta-editor-wrapper",
-                            ) as HTMLElement | null
-                            const savedScrollTop = scrollContainer?.scrollTop ?? 0
-                            const savedElementScrollTop = rootElement?.scrollTop ?? 0
-
-                            selection.insertRawText("\n")
-
-                            // Restore scroll position after DOM update
-                            if (scrollContainer) {
-                                requestAnimationFrame(() => {
-                                    scrollContainer.scrollTop = savedScrollTop
-                                })
-                            }
-                            if (rootElement) {
-                                requestAnimationFrame(() => {
-                                    rootElement.scrollTop = savedElementScrollTop
-                                })
-                            }
-
-                            handled = true
-                        }
-                    },
-                    {discrete: true},
-                )
-                return handled
+                editor.update(() => {
+                    const selection = $getSelection()
+                    if (!$isRangeSelection(selection)) return false
+
+                    const anchorNode = selection.anchor.getNode()
+                    const topNode = anchorNode.getTopLevelElementOrThrow()
+
+                    if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
+                        event?.preventDefault()
+                        selection.insertRawText("\n")
+                        return true
+                    }
+                })
+                return true
             },
             COMMAND_PRIORITY_HIGH,
         )
diff --git a/web/oss/src/components/Playground/Components/Menus/SelectVariant/index.tsx b/web/oss/src/components/Playground/Components/Menus/SelectVariant/index.tsx
@@ -304,7 +304,7 @@ const SelectVariant = ({
 
     // Normal mode: standard picker
     return (
-        <div style={style ?? {width: 200}}>
+        <div style={style ?? {width: 120}}>
             <EntityPicker<PlaygroundRevisionSelectionResult>
                 variant="tree-select"
                 adapter={adapter}
diff --git a/web/oss/src/styles/code-editor-styles.css b/web/oss/src/styles/code-editor-styles.css
@@ -1,7 +1,7 @@
 .code-editor {
     /* === Editor container === */
     .editor-code {
-        font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         position: relative;
         white-space: pre;
         tab-size: 2;
@@ -10,6 +10,7 @@
         /* Initialize CSS counter for line numbers */
         counter-reset: line-number;
 
+        font-family: Menlo, Consolas, Monaco, monospace;
         display: block;
         line-height: 1.53;
         font-size: 13px;
diff --git a/web/oss/src/styles/editor-theme.css b/web/oss/src/styles/editor-theme.css
@@ -41,7 +41,7 @@ h1 {
     max-width: 100%;
     color: #000;
     position: relative;
-    line-height: 24px;
+    line-height: 20px;
     font-weight: 400;
     text-align: left;
     border-top-left-radius: 10px;
@@ -98,11 +98,10 @@ h1 {
 }
 
 .editor-text-code {
-    background-color: rgba(221, 223, 225, 0.49);
-    padding: 2px 0.35rem;
-    font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
-    font-size: 90%;
-    border-radius: 3px;
+    background-color: rgb(240, 242, 245);
+    padding: 1px 0.25rem;
+    font-family: Menlo, Consolas, Monaco, monospace;
+    font-size: 94%;
 }
 
 .editor-link {
@@ -128,7 +127,7 @@ h1 {
 
 .code-only .editor-code {
     background-color: rgb(240, 242, 245);
-    font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
+    font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
     padding: 8px 8px 8px 52px;
     line-height: 1.53;
@@ -185,73 +184,23 @@ h1 {
 }
 
 .editor-heading-h1 {
-    font-size: 28px;
+    font-size: 18px;
     color: rgb(5, 5, 5);
-    font-weight: 700;
+    font-weight: 400;
     margin: 0;
-    margin-top: 24px;
     margin-bottom: 12px;
     padding: 0;
-    padding-bottom: 8px;
-    letter-spacing: -0.3px;
-    line-height: 1.4;
-    border-bottom: 1px solid #e0e0e0;
+    line-height: 1.5;
 }
 
 .editor-heading-h2 {
-    font-size: 24px;
-    color: rgb(5, 5, 5);
-    font-weight: 600;
-    margin: 0;
-    margin-top: 20px;
-    margin-bottom: 10px;
-    padding: 0;
-    padding-bottom: 6px;
-    line-height: 1.35;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.editor-heading-h3 {
-    font-size: 20px;
-    color: rgb(5, 5, 5);
-    font-weight: 600;
-    margin: 0;
-    margin-top: 18px;
-    margin-bottom: 8px;
-    padding: 0;
-    line-height: 1.35;
-}
-
-.editor-heading-h4 {
-    font-size: 18px;
-    color: rgb(5, 5, 5);
-    font-weight: 600;
-    margin: 0;
-    margin-top: 16px;
-    margin-bottom: 6px;
-    padding: 0;
-    line-height: 1.35;
-}
-
-.editor-heading-h5 {
-    font-size: 16px;
-    color: rgb(5, 5, 5);
-    font-weight: 600;
-    margin: 0;
-    margin-top: 14px;
-    margin-bottom: 4px;
-    padding: 0;
-    line-height: 1.35;
-}
-
-.editor-heading-h6 {
-    font-size: 14px;
-    color: rgb(37, 37, 37);
-    font-weight: 600;
+    font-size: 15px;
+    color: rgb(101, 103, 107);
+    font-weight: 700;
     margin: 0;
-    margin-top: 12px;
-    margin-bottom: 4px;
+    margin-top: 10px;
     padding: 0;
+    text-transform: uppercase;
     line-height: 1.35;
 }
 
diff --git a/web/oss/src/styles/globals.css b/web/oss/src/styles/globals.css
@@ -67,8 +67,8 @@ body {
 }
 
 .editor-input > p {
-    margin-top: 5px !important;
-    margin-bottom: 8px !important;
+    margin-top: 4px !important;
+    margin-bottom: 4px !important;
 }
 
 .hover-button-wrapper {
@@ -180,26 +180,22 @@ body {
 
 .editor-inner:not(.code-editor) {
     .editor-code {
-        background-color: rgba(223, 224, 227, 0.28);
-        font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
+        background-color: rgb(240, 242, 245);
+        font-family: Menlo, Consolas, Monaco, monospace;
         display: block;
         padding: 8px;
         line-height: 1.53;
-        font-size: 13.5px;
+        font-size: 13px;
         margin: 0;
-        margin-top: 12px;
-        margin-bottom: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
         overflow-x: auto;
         position: relative;
         tab-size: 2;
-        border-radius: 6px;
-        border: 1px solid rgba(108, 112, 118, 0.05);
     }
 
     > .editor-input.markdown-view > .editor-code {
         background-color: transparent;
-        border: none;
-        font-size: 14px;
     }
     > .editor-input:not(.markdown-view) > .editor-code {
         &:after {
diff --git a/web/oss/src/styles/tokens/antd-themeConfig.json b/web/oss/src/styles/tokens/antd-themeConfig.json
@@ -924,7 +924,7 @@
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
-            "fontSize": 13,
+            "fontSize": 12,
             "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
@@ -944,12 +944,12 @@
             "itemSelectedBg": "#f5f7fa",
             "itemHoverColor": "#1c2c3d",
             "itemHoverBg": "rgba(5, 23, 41, 0.06)",
-            "itemHeight": 32,
+            "itemHeight": 28,
             "itemDisabledColor": "#bdc7d1",
             "itemColor": "#586673",
             "itemBorderRadius": 10,
             "itemBg": "#ffffff",
-            "iconSize": 14,
+            "iconSize": 12,
             "horizontalItemSelectedColor": "#1c2c3d",
             "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
             "horizontalItemHoverColor": "#1c2c3d",
diff --git a/web/packages/agenta-ui/src/Editor/plugins/markdown/markdownPlugin.tsx b/web/packages/agenta-ui/src/Editor/plugins/markdown/markdownPlugin.tsx
@@ -124,47 +124,20 @@ const MarkdownPlugin = ({id}: {id: string}) => {
         return editor.registerCommand(
             KEY_ENTER_COMMAND,
             (event) => {
-                let handled = false
-                editor.update(
-                    () => {
-                        const selection = $getSelection()
-                        if (!$isRangeSelection(selection)) return
-
-                        const anchorNode = selection.anchor.getNode()
-                        const topNode = anchorNode.getTopLevelElementOrThrow()
-
-                        if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
-                            event?.preventDefault()
-
-                            // Save scroll position before inserting text to prevent
-                            // the browser from auto-scrolling to the bottom
-                            const rootElement = editor.getRootElement()
-                            const scrollContainer = rootElement?.closest(
-                                ".agenta-editor-wrapper",
-                            ) as HTMLElement | null
-                            const savedScrollTop = scrollContainer?.scrollTop ?? 0
-                            const savedElementScrollTop = rootElement?.scrollTop ?? 0
-
-                            selection.insertRawText("\n")
-
-                            // Restore scroll position after DOM update
-                            if (scrollContainer) {
-                                requestAnimationFrame(() => {
-                                    scrollContainer.scrollTop = savedScrollTop
-                                })
-                            }
-                            if (rootElement) {
-                                requestAnimationFrame(() => {
-                                    rootElement.scrollTop = savedElementScrollTop
-                                })
-                            }
-
-                            handled = true
-                        }
-                    },
-                    {discrete: true},
-                )
-                return handled
+                editor.update(() => {
+                    const selection = $getSelection()
+                    if (!$isRangeSelection(selection)) return false
+
+                    const anchorNode = selection.anchor.getNode()
+                    const topNode = anchorNode.getTopLevelElementOrThrow()
+
+                    if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
+                        event?.preventDefault()
+                        selection.insertRawText("\n")
+                        return true
+                    }
+                })
+                return true
             },
             COMMAND_PRIORITY_HIGH,
         )
