From 1f23b78de2db7207aa07a5126e3c52064b211087 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 13 Jan 2025 14:26:37 +0100
Subject: [PATCH] Fixed equation preview overflow (#22769)

* Fixed equation preview overflow

* Decrease max-height to 200px

GitOrigin-RevId: 4a733d25e86b0d4adfb2dc697bc251ad244949b4
---
 .../js/features/source-editor/extensions/math-preview.ts | 4 ++--
 .../frontend/stylesheets/app/editor/math-preview.less    | 9 ++++++---
 .../bootstrap-5/pages/editor/math-preview.scss           | 9 ++++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/math-preview.ts b/services/web/frontend/js/features/source-editor/extensions/math-preview.ts
index a28a1c9508..6d7191f036 100644
--- a/services/web/frontend/js/features/source-editor/extensions/math-preview.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/math-preview.ts
@@ -235,12 +235,12 @@ const buildTooltipContent = (
  * Styles for the preview tooltip
  */
 const mathPreviewTheme = EditorView.baseTheme({
-  '&light .ol-cm-math-tooltip-container': {
+  '&light .ol-cm-math-tooltip': {
     boxShadow: '0px 2px 4px 0px #1e253029',
     border: '1px solid #e7e9ee !important',
     backgroundColor: 'white !important',
   },
-  '&dark .ol-cm-math-tooltip-container': {
+  '&dark .ol-cm-math-tooltip': {
     boxShadow: '0px 2px 4px 0px #1e253029',
     border: '1px solid #2f3a4c !important',
     backgroundColor: '#1b222c !important',
diff --git a/services/web/frontend/stylesheets/app/editor/math-preview.less b/services/web/frontend/stylesheets/app/editor/math-preview.less
index 5b158499c4..b42eb74aab 100644
--- a/services/web/frontend/stylesheets/app/editor/math-preview.less
+++ b/services/web/frontend/stylesheets/app/editor/math-preview.less
@@ -1,9 +1,8 @@
 .ol-cm-math-tooltip-container {
   position: relative;
-  border-radius: 4px;
-  max-height: 400px;
-  max-width: 800px;
   overflow: visible;
+  border: 0px !important;
+  background-color: transparent !important;
 }
 
 .ol-cm-math-tooltip {
@@ -11,6 +10,10 @@
   gap: 8px;
   overflow: auto;
   padding: 8px;
+  border-radius: 4px;
+  max-height: 200px;
+  max-width: 800px;
+  margin-top: 10px;
 
   .dropdown {
     position: static;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss
index 04c38c8e2a..fd2bfc92f7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss
@@ -1,9 +1,8 @@
 .ol-cm-math-tooltip-container {
   position: relative;
-  border-radius: var(--border-radius-base);
-  max-height: 400px;
-  max-width: 800px;
   overflow: visible;
+  border: 0 !important;
+  background-color: transparent !important;
 }
 
 .ol-cm-math-tooltip {
@@ -11,6 +10,10 @@
   gap: var(--spacing-04);
   overflow: auto;
   padding: var(--spacing-04);
+  border-radius: var(--border-radius-base);
+  max-height: 200px;
+  max-width: 800px;
+  margin-top: 10px;
 
   .dropdown {
     position: static;