From e1ec8566501a64ce74705ba3e1d472e9d96aee96 Mon Sep 17 00:00:00 2001
From: Jimmy Domagala-Tang <Jimmy.Domagala-Tang@overleaf.com>
Date: Mon, 22 Apr 2024 07:02:56 -0700
Subject: [PATCH] Merge pull request #18066 from overleaf/ae-revert-toolbar

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

GitOrigin-RevId: eda4deba8eb384cddf2ea9c90edee080ceb6330c
---
 .../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, 22 insertions(+), 11 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 ba765ca886..74a44a0c11 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,6 +168,8 @@ 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 24aa0cb5b0..e499dd4cd2 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,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',
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 f5219e1416..f2cf8a6134 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,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(() => {
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 04383ab7af..a27532b7ef 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/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;