feat: resonsive toggle button layout

Author: arnog

CHANGELOG.md

@@ -1,5 +1,12 @@
 ## [Unreleased]
 
+### New Features
+
+- **Responsive toggle button layout**: The virtual keyboard toggle and menu
+  button now automatically switch from horizontal (side-by-side) to vertical
+  (stacked) layout when the mathfield height is 100px or greater. This happens
+  dynamically as you add content to the mathfield.
+
 ### Resolved Issues
 
 - Fixed virtual keyboard toggle requiring triple-click to activate.

css/mathfield.less

@@ -26,14 +26,19 @@
   }
 }
 
+:host {
+  display: block;
+}
+
 // The .ML__container includes the visible parts of the math-field:
-// the .ML__content and the .ML__virtual-keyboard-toggle.
+// the .ML__content and the toggle buttons (wrapped in .ML__toggles).
 // .ML__container
 //      > .ML__content
 //            > .ML__latex > .ML__base
 //            > .ML__selection
-//      > .ML__virtual-keyboard-toggle
-//      > .ML__menu-toggle
+//      > .ML__toggles
+//            > .ML__virtual-keyboard-toggle
+//            > .ML__menu-toggle
 .ML__container {
   display: inline-flex;
   flex-flow: row;
@@ -44,7 +49,7 @@
   padding: 4px;
   box-sizing: border-box;
 
-  /* This attribute is necessary to work around a Firefox issue where 
+  /* This attribute is necessary to work around a Firefox issue where
   where clicking multiple times on the border leads to a focused mathfield that cannot be edited until focus is lost and regained (also fixes the multiple cursor issue on firefox that can occur with the same sequence of events).
   */
   pointer-events: auto;
@@ -194,6 +199,27 @@
   }
 }
 
+/* Container for the virtual keyboard toggle and menu toggle buttons */
+.ML__toggles {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0;
+  align-self: flex-start;
+}
+
+/* Vertical layout modifier */
+.ML__toggles--vertical {
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+
+  .ML__virtual-keyboard-toggle,
+  .ML__menu-toggle {
+    margin-right: 0;
+  }
+}
+
 .ML__virtual-keyboard-toggle,
 .ML__menu-toggle {
   box-sizing: border-box;

src/editor-mathfield/mathfield-private.ts

@@ -332,7 +332,10 @@ export class _Mathfield implements Mathfield, KeyboardDelegateInterface {
     markup.push(contentMarkup(this));
     markup.push('</span>');
 
-    // 2.1/ The virtual keyboard toggle
+    // 2.1/ Wrapper for toggle buttons
+    markup.push('<div class=ML__toggles>');
+
+    // 2.1.1/ The virtual keyboard toggle
     if (window.mathVirtualKeyboard) {
       markup.push(
         `<div part=virtual-keyboard-toggle class=ML__virtual-keyboard-toggle role=button ${
@@ -343,13 +346,15 @@ export class _Mathfield implements Mathfield, KeyboardDelegateInterface {
       markup.push('</div>');
     }
 
-    // 2.2// The menu toggle
+    // 2.1.2/ The menu toggle
     markup.push(
       `<div part=menu-toggle class=ML__menu-toggle role=button data-l10n-tooltip="tooltip.menu">`
     );
     markup.push(MENU_GLYPH);
     markup.push('</div>');
 
+    markup.push('</div>'); // end toggles wrapper
+
     markup.push('</span>'); // end container
 
     // 3.1/ The aria-live region for announcements
@@ -419,8 +424,9 @@ If you are using Vue, this may be because you are using the runtime-only build o
       }
     }
 
-    const virtualKeyboardToggle =
-      this.element.querySelector<HTMLElement>('[part=virtual-keyboard-toggle]');
+    const virtualKeyboardToggle = this.element.querySelector<HTMLElement>(
+      '[part=virtual-keyboard-toggle]'
+    );
     virtualKeyboardToggle?.addEventListener(
       'pointerdown',
       (ev) => {
@@ -463,7 +469,6 @@ If you are using Vue, this may be because you are using the runtime-only build o
     );
 
     if (
-      this.model.atoms.length <= 1 ||
       this.disabled ||
       (this.readOnly && !this.hasEditableContent) ||
       this.userSelect === 'none'
@@ -491,10 +496,15 @@ If you are using Vue, this may be because you are using the runtime-only build o
         this.resizeObserverStarted = false;
         return;
       }
+      this.updateToggleLayout();
       requestUpdate(this);
     });
     this.resizeObserverStarted = true;
     this.resizeObserver.observe(this.field);
+    this.resizeObserver.observe(this.container);
+
+    // Initial toggle layout check (delayed to ensure rendering is complete)
+    setTimeout(() => this.updateToggleLayout(), 100);
 
     window.mathVirtualKeyboard.addEventListener(
       'virtual-keyboard-toggle',
@@ -924,6 +934,26 @@ If you are using Vue, this may be because you are using the runtime-only build o
     }
   }
 
+  /** Update toggle button layout based on mathfield height */
+  updateToggleLayout(): void {
+    if (!this.element || !this.host) return;
+
+    const toggles = this.element.querySelector<HTMLElement>('.ML__toggles');
+    if (!toggles) return;
+
+    // Use host height to account for both content height and CSS-specified height
+    const height = this.host.offsetHeight;
+    const hasVerticalClass = toggles.classList.contains(
+      'ML__toggles--vertical'
+    );
+
+    // Automatically apply vertical layout when mathfield is tall (>= 100px)
+    if (height >= 100 && !hasVerticalClass)
+      toggles.classList.add('ML__toggles--vertical');
+    else if (height < 100 && hasVerticalClass)
+      toggles.classList.remove('ML__toggles--vertical');
+  }
+
   dispose(): void {
     if (!isValidMathfield(this)) return;
 

src/editor-mathfield/render.ts

@@ -203,8 +203,8 @@ export function render(
       mathfield.userSelect === 'none'
     )
       hideMenu = true;
-    // If the width of the element is less than 50px, hide the menu
-    if (!hideMenu && field.offsetWidth < 50) hideMenu = true;
+    // If the width of the mathfield element is less than 50px, hide the menu
+    if (!hideMenu && mathfield.element.offsetWidth < 50) hideMenu = true;
 
     menuToggle.style.display = hideMenu ? 'none' : '';
   }
@@ -229,6 +229,11 @@ export function render(
   //
   renderSelection(mathfield, renderOptions.interactive);
 
+  //
+  // 5. Update toggle button layout based on content height
+  //
+  mathfield.updateToggleLayout();
+
   mathfield.dirty = false;
 }