Fixed equation preview overflow (#22769)

* Fixed equation preview overflow

* Decrease max-height to 200px

GitOrigin-RevId: 4a733d25e86b0d4adfb2dc697bc251ad244949b4

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',

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;

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;