Avoid vertical border between editor switch and empty space (#18029)

GitOrigin-RevId: 516098061a4d329daf55bb42bcf47a5a412595c1

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

@@ -168,8 +168,6 @@ 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,26 +87,22 @@ const toolbarTheme = EditorView.theme({
     padding: '0 4px',
     margin: '4px 0',
     lineHeight: '1',
-    '&: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,
+      '.editor-toggle-switch + &': {
+        borderLeft: 'none', // avoid a left border when no toolbar buttons are shown
+      },
     },
     '&.overflow-hidden': {
       borderLeft: 'none',
-      },
-    },
-    '&.overflow-hidden': {
       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,8 +19,7 @@ export const codemirrorDevTools = () => {
 }
 
 const devToolsButton = ViewPlugin.define(view => {
-  const getContainer = () =>
-    document.querySelector('.formatting-buttons-wrapper')
+  const getContainer = () => document.querySelector('.ol-cm-toolbar-end')
 
   const removeButton = () => {
     getContainer()?.querySelector('#cm6-dev-tools-button')?.remove()
@@ -38,7 +37,7 @@ const devToolsButton = ViewPlugin.define(view => {
       view.dispatch(toggleDevTools())
     })
 
-    getContainer()?.prepend(button)
+    getContainer()?.append(button)
   }
 
   window.setTimeout(() => {

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

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