From 39b4aed85f948719df348cfa2a0837caec3742f7 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 17 Jun 2025 12:47:25 +0100
Subject: [PATCH] Merge pull request #26479 from overleaf/dp-synctex

Add synctex buttons to new editor

GitOrigin-RevId: 7790c848f96d9b12d95f2f01c5048da2ea17d8b4
---
 .../ide-redesign/components/main-layout.tsx    |  2 +-
 .../bootstrap-5/pages/editor/ide.scss          | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
index 284e75c19d..8ec00a397e 100644
--- a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
@@ -91,7 +91,7 @@ export default function MainLayout() {
                   tooltipWhenClosed={t('tooltip_show_pdf')}
                 />
                 {pdfLayout === 'sideBySide' && (
-                  <div className="synctex-controls" hidden>
+                  <div className="synctex-controls">
                     <DefaultSynctexControl />
                   </div>
                 )}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
index 7512424a4a..fca467fe76 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@@ -61,6 +61,24 @@ $editor-toggler-bg-dark-color: color.adjust(
       display: none !important;
     }
   }
+
+  .synctex-controls {
+    background-color: var(--bg-primary-themed);
+    border-radius: var(--border-radius-full);
+    border: 1px solid var(--border-divider-themed);
+  }
+
+  .synctex-control:not(.detach-synctex-control) {
+    margin-bottom: 0;
+    background-color: transparent;
+    color: var(--content-primary-themed);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: var(--bg-tertiary-themed);
+    }
+  }
 }
 
 .global-alerts {