Improve max window size

packages/ckeditor5-math/theme/mathform.css

@@ -1,10 +1,10 @@
 /**
  * Math equation editor dialog styles
- * Complete version with scrolling fixes for preview and input
+ * Supports MathLive input, raw LaTeX textarea, and equation preview
  */
 
 /* ============================================================================
-   1. Main Layout Containers (The Skeleton)
+   Main Dialog Container
    ========================================================================= */
 
 .ck.ck-math-form {
@@ -12,9 +12,10 @@
     flex-direction: column;
     padding: var(--ck-spacing-standard);
     box-sizing: border-box;
-	max-width: 80vw;
-    height: 100%;  /* Never wider than screen */
-    overflow-x: hidden; /* Prevent the main window from scrolling horizontally */
+    max-width: 80vw;
+    max-height: 80vh;
+    height: 100%;
+    overflow-x: hidden;
 }
 
 /* Mobile responsiveness */
@@ -24,6 +25,10 @@
     }
 }
 
+/* ============================================================================
+   Content Layout
+   ========================================================================= */
+
 .ck-math-view {
     display: flex;
     flex-direction: column;
@@ -34,6 +39,36 @@
     width: 100%;
 }
 
+/* LaTeX section heading */
+.ck-math-view > .ck-labeled-field-view::before {
+    content: "LaTeX";
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ck-color-text, #333);
+    margin-bottom: 4px;
+    padding-left: 2px;
+    opacity: 0.8;
+}
+
+/* Equation preview section heading */
+.ck-math-view > math-field::before {
+    content: "Equation preview";
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ck-color-text, #333);
+    margin-bottom: 4px;
+    padding-left: 2px;
+    opacity: 0.8;
+}
+
+/* Add spacing between preview and action buttons */
+.ck-math-view > math-field {
+    margin-bottom: var(--ck-spacing-large, 16px);
+}
+
+/* Action buttons row (Save/Cancel) */
 .ck-math-button-row {
     display: flex;
     flex-shrink: 0;
@@ -45,10 +80,10 @@
 }
 
 /* ============================================================================
-   2. Shared Styling (Applies to Input AND Preview)
+   Shared Styles for Input Fields
    ========================================================================= */
 
-/* This targets both the top input AND the bottom preview */
+/* Base styling for both MathLive fields and textareas */
 .ck.ck-math-form math-field,
 .ck.ck-math-form textarea {
     box-sizing: border-box;
@@ -62,33 +97,28 @@
     outline-offset: 6px;
 }
 
-/* SPECIFIC FIX FOR PREVIEW SCROLLING */
+/* MathLive-specific configuration */
 .ck.ck-math-form math-field {
     display: block !important;
     width: 100%;
-
-    /* 3. Stop it from growing infinite */
     max-width: 100%;
-
-    /* 4. Enable scrollbars for the red matrix area */
     overflow-x: auto !important;
 
-    /* Theme overrides */
+    /* MathLive theme customization */
     --selection-background-color: rgba(33, 150, 243, 0.2);
     --selection-color: inherit;
     --contains-highlight-background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* ============================================================================
-   3. MathLive Input Specifics (The Top Box)
+   MathLive Visual Editor (Top Input)
    ========================================================================= */
 
-/* Wrapper for the editable input at the top */
 .ck.ck-mathlive-input {
     display: inline-block;
     flex: 0 0 auto;
     width: 100%;
-    max-width: 100%; /* Safety */
+    max-width: 100%;
     min-height: fit-content;
     max-height: 80vh;
     overflow: auto;
@@ -96,7 +126,7 @@
     resize: none;
 }
 
-/* Shadow DOM Layout adjustments (Keep your existing logic) */
+/* Configure MathLive shadow DOM layout */
 .ck.ck-math-form math-field::part(container),
 .ck.ck-math-form math-field::part(content),
 .ck.ck-math-form math-field::part(field) {
@@ -108,13 +138,17 @@
     justify-content: flex-start;
 }
 
-/* UI Buttons positions */
+/* Position MathLive UI controls */
 .ck.ck-math-form math-field::part(virtual-keyboard-toggle),
 .ck.ck-math-form math-field::part(menu-toggle) {
     position: absolute;
     top: 8px;
 }
-.ck.ck-math-form math-field::part(virtual-keyboard-toggle) { right: 40px; }
+
+.ck.ck-math-form math-field::part(virtual-keyboard-toggle) {
+    right: 40px;
+}
+
 .ck.ck-math-form math-field::part(menu-toggle) {
     right: 8px;
     display: flex !important;
@@ -122,7 +156,7 @@
 }
 
 /* ============================================================================
-   4. Raw LaTeX Integration (The Middle Box)
+   Raw LaTeX Textarea (Middle Input)
    ========================================================================= */
 
 .ck-math-view .ck-labeled-field-view {
@@ -130,24 +164,21 @@
     flex-direction: column;
     flex: 0 0 auto;
     min-width: 100%;
-
-    /* Allow the middle box to shrink if needed */
     width: 100%;
     max-width: 100%;
-
     min-height: 140px;
-    max-height: 70vh;
+    max-height: 65vh;
     resize: both;
     overflow: auto;
     background: transparent;
 }
 
-/* Hide label */
+/* Hide the default label (we use ::before for custom heading) */
 .ck-math-view .ck-labeled-field-view .ck-label {
     display: none !important;
 }
 
-/* Internal wrapper */
+/* Textarea wrapper */
 .ck-math-view .ck-labeled-field-view .ck-labeled-field-view__input-wrapper {
     display: flex;
     flex-direction: column;
@@ -161,7 +192,7 @@
     box-shadow: none;
 }
 
-/* The Textarea */
+/* Raw LaTeX textarea styling */
 .ck-math-view .ck-labeled-field-view textarea {
     display: block;
     flex: 1 1 auto;
@@ -174,6 +205,7 @@
     transition: none !important;
 }
 
+/* Textarea hover and focus states */
 .ck-math-view .ck-labeled-field-view textarea:hover,
 .ck-math-view .ck-labeled-field-view textarea:focus {
     background: var(--ck-color-input-background) !important;