From 5b5e6507545158174a8adb85f058a87438cf1212 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 15 Jul 2025 09:58:37 +0100
Subject: [PATCH] Merge pull request #27078 from
 overleaf/mj-dark-mode-panel-border

[web] Use correct border color between toolbar and editor

GitOrigin-RevId: 48e08bdec57b25f2f70731f89c66be8c487b9e41
---
 .../extensions/toolbar/toolbar-panel.ts              | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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 30eb0098f8..24d43eb236 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
@@ -319,8 +319,18 @@ const toolbarTheme = EditorView.theme({
   },
 })
 
+const toolbarBorderTheme = EditorView.baseTheme({
+  '&light.overall-theme-dark .cm-panels-top': {
+    borderBottom: '1px solid var(--border-divider-dark)',
+  },
+})
+
 /**
  * A panel which contains the editor toolbar, provided by a state field which allows the toolbar to be toggled,
  * and styles for the toolbar.
  */
-export const toolbarPanel = () => [toolbarState, toolbarTheme]
+export const toolbarPanel = () => [
+  toolbarState,
+  toolbarTheme,
+  toolbarBorderTheme,
+]