Merge pull request #18066 from overleaf/ae-revert-toolbar

Revert "Avoid vertical border between editor switch and empty space"

GitOrigin-RevId: eda4deba8eb384cddf2ea9c90edee080ceb6330c

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -168,6 +168,8 @@ const Toolbar = memo(function Toolbar() {
             />
           </ToolbarOverflow>
         )}
+
+        <div className="formatting-buttons-wrapper" />
       </div>
 
       <div

services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts

@@ -87,22 +87,26 @@ const toolbarTheme = EditorView.theme({
     padding: '0 4px',
     margin: '4px 0',
     lineHeight: '1',
-    borderLeft: '1px solid rgba(125, 125, 125, 0.3)',
-    '&.ol-cm-toolbar-end': {
-      borderLeft: 'none',
-    },
-    '&.ol-cm-toolbar-stretch': {
-      flex: 1,
-      '.editor-toggle-switch + &': {
-        borderLeft: 'none', // avoid a left border when no toolbar buttons are shown
+    '&:not(:first-of-type)': {
+      borderLeft: '1px solid rgba(125, 125, 125, 0.3)',
+      '&.ol-cm-toolbar-end': {
+        borderLeft: 'none',
+      },
+      '&.ol-cm-toolbar-stretch': {
+        flex: 1,
+      },
+      '&.overflow-hidden': {
+        borderLeft: 'none',
       },
     },
     '&.overflow-hidden': {
-      borderLeft: 'none',
       width: 0,
       padding: 0,
     },
   },
+  '.formatting-buttons-wrapper': {
+    flex: 1,
+  },
   '.ol-cm-toolbar-button': {
     display: 'inline-flex',
     alignItems: 'center',

services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts

@@ -19,7 +19,8 @@ export const codemirrorDevTools = () => {
 }
 
 const devToolsButton = ViewPlugin.define(view => {
-  const getContainer = () => document.querySelector('.ol-cm-toolbar-end')
+  const getContainer = () =>
+    document.querySelector('.formatting-buttons-wrapper')
 
   const removeButton = () => {
     getContainer()?.querySelector('#cm6-dev-tools-button')?.remove()
@@ -37,7 +38,7 @@ const devToolsButton = ViewPlugin.define(view => {
       view.dispatch(toggleDevTools())
     })
 
-    getContainer()?.append(button)
+    getContainer()?.prepend(button)
   }
 
   window.setTimeout(() => {

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -334,6 +334,10 @@
   overflow: hidden;
 }
 
+.formatting-buttons-wrapper {
+  display: flex;
+}
+
 .formatting-btn {
   color: @formatting-btn-color;
   background-color: @formatting-btn-bg;