Fix Assign Spool modal clipping on SpoolBuddy display

CSS rules scoped via data-spoolbuddy-kiosk force the modal panel to
  90vh with flex column layout. Content area scrolls, header/footer
  pinned. Uses height (not just max-height) so flex-basis auto works
  correctly. No flash — CSS applies before paint.

frontend/src/components/spoolbuddy/SpoolBuddyLayout.tsx

@@ -189,6 +189,7 @@ export function SpoolBuddyLayout() {
     <>
       <div
         ref={rootRef}
+        data-spoolbuddy-kiosk
         className="w-screen h-screen bg-bambu-dark text-white flex flex-col overflow-hidden"
         style={{ ...brightnessStyle, overscrollBehaviorX: 'none' }}
         onTouchStart={handleTouchStart}

frontend/src/index.css

@@ -392,6 +392,33 @@ body {
   box-shadow: var(--card-shadow);
 }
 
+/* ============================================
+   SPOOLBUDDY KIOSK MODAL CONSTRAINTS
+   Cap modals to viewport on the small SpoolBuddy
+   touchscreen. Uses height (not max-height) so
+   flex children distribute space correctly.
+   ============================================ */
+[data-spoolbuddy-kiosk] .fixed .relative.w-full {
+  height: 90vh;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-spoolbuddy-kiosk] .fixed .relative.w-full > div:first-child {
+  flex-shrink: 0;
+}
+
+[data-spoolbuddy-kiosk] .fixed .relative.w-full > div:last-child {
+  flex-shrink: 0;
+}
+
+[data-spoolbuddy-kiosk] .fixed .relative.w-full > div:nth-child(2) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 /* Calendar selected-day list scrollbar theming */
 .calendar-scroll {
   scrollbar-width: thin;

frontend/src/pages/spoolbuddy/SpoolBuddyAmsPage.tsx

@@ -233,32 +233,6 @@ export function SpoolBuddyAmsPage() {
     trayInfo: { type: string; material?: string; profile?: string; color: string; location: string };
   } | null>(null);
 
-  // Constrain assign-spool modal to viewport on small SpoolBuddy screen
-  useEffect(() => {
-    if (!assignSpoolModal) return;
-    const applyStyles = () => {
-      // The modal's panel is the only element with both 'relative' and 'max-w-2xl' classes inside a z-50 fixed overlay
-      const panels = document.querySelectorAll<HTMLElement>('.fixed .relative');
-      for (const panel of panels) {
-        if (!panel.classList.contains('w-full')) continue;
-        panel.style.maxHeight = '90vh';
-        panel.style.display = 'flex';
-        panel.style.flexDirection = 'column';
-        const children = Array.from(panel.children) as HTMLElement[];
-        if (children.length >= 3) {
-          children[0].style.flexShrink = '0';
-          children[1].style.flex = '1 1 0';
-          children[1].style.minHeight = '0';
-          children[1].style.overflowY = 'auto';
-          children[children.length - 1].style.flexShrink = '0';
-        }
-      }
-    };
-    // Run after React commit + browser paint
-    const raf = requestAnimationFrame(() => setTimeout(applyStyles, 0));
-    return () => cancelAnimationFrame(raf);
-  }, [assignSpoolModal]);
-
   // Link spool modal state (Spoolman)
   const [linkSpoolModal, setLinkSpoolModal] = useState<{
     tagUid: string;

static/index.html

@@ -23,8 +23,8 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-DNuHny1V.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
+    <script type="module" crossorigin src="/assets/index-t28DJYDZ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-eNQIpF4A.css">
   </head>
   <body>
     <div id="root"></div>