From 315b5116666ca1e9dd39441d143ffad4009eb11a Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 22 Apr 2024 13:46:54 +0100
Subject: [PATCH] Avoid vertical border between editor switch and empty space
 (#18029)

GitOrigin-RevId: 516098061a4d329daf55bb42bcf47a5a412595c1
---
 .../components/codemirror-toolbar.tsx         |  2 --
 .../extensions/toolbar/toolbar-panel.ts       | 22 ++++++++-----------
 .../languages/latex/codemirror-dev-tools.ts   |  5 ++---
 .../stylesheets/app/editor/toolbar.less       |  4 ----
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
index 74a44a0c11..ba765ca886 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/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
diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
index e499dd4cd2..24aa0cb5b0 100644
--- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+++ b/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,
-      },
-      '&.overflow-hidden': {
-        borderLeft: 'none',
+    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',
       width: 0,
       padding: 0,
     },
   },
-  '.formatting-buttons-wrapper': {
-    flex: 1,
-  },
   '.ol-cm-toolbar-button': {
     display: 'inline-flex',
     alignItems: 'center',
diff --git a/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts b/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts
index f2cf8a6134..f5219e1416 100644
--- a/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts
+++ b/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(() => {
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index a27532b7ef..04383ab7af 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/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;