Fix Assign Spool modal clipping on SpoolBuddy display

  Used a ref callback wrapper in SpoolBuddyAmsPage to directly apply
  inline styles (max-height 90vh, flex column, scrollable content) to
  the shared AssignSpoolModal DOM elements without modifying the
  shared component.

frontend/src/components/spoolbuddy/SpoolBuddyLayout.tsx

@@ -189,7 +189,6 @@ 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,23 +392,6 @@ body {
   box-shadow: var(--card-shadow);
 }
 
-/* ============================================
-   SPOOLBUDDY KIOSK MODAL CONSTRAINTS
-   Cap modals to viewport height on the small
-   SpoolBuddy touchscreen.
-   ============================================ */
-[data-spoolbuddy-kiosk] .fixed.z-50 > .relative {
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-spoolbuddy-kiosk] .fixed.z-50 > .relative > .p-4:not(:first-child):not(:last-child) {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-}
-
 /* Calendar selected-day list scrollbar theming */
 .calendar-scroll {
   scrollbar-width: thin;

frontend/src/pages/spoolbuddy/SpoolBuddyAmsPage.tsx

@@ -736,19 +736,42 @@ export function SpoolBuddyAmsPage() {
         );
       })()}
 
-      {/* Assign spool modal (inventory) */}
+      {/* Assign spool modal (inventory) — ref callback constrains modal to viewport on small SpoolBuddy screen */}
       {assignSpoolModal && (
-        <AssignSpoolModal
-          isOpen={!!assignSpoolModal}
-          onClose={() => {
-            setAssignSpoolModal(null);
-            queryClient.invalidateQueries({ queryKey: ['spool-assignments', selectedPrinterId] });
-          }}
-          printerId={assignSpoolModal.printerId}
-          amsId={assignSpoolModal.amsId}
-          trayId={assignSpoolModal.trayId}
-          trayInfo={assignSpoolModal.trayInfo}
-        />
+        <div ref={(el) => {
+          if (!el) return;
+          // Find the modal panel (the relative div inside the fixed overlay)
+          const panel = el.querySelector<HTMLElement>(':scope > div > div.relative');
+          if (panel) {
+            panel.style.maxHeight = '90vh';
+            panel.style.display = 'flex';
+            panel.style.flexDirection = 'column';
+            // Content div is the second child (after header)
+            const children = Array.from(panel.children) as HTMLElement[];
+            // Header (first) and footer (last) stay fixed, content in between scrolls
+            for (let i = 0; i < children.length; i++) {
+              if (i === 0 || i === children.length - 1) {
+                children[i].style.flexShrink = '0';
+              } else if (i === 1) {
+                children[i].style.flex = '1 1 0';
+                children[i].style.minHeight = '0';
+                children[i].style.overflowY = 'auto';
+              }
+            }
+          }
+        }}>
+          <AssignSpoolModal
+            isOpen={!!assignSpoolModal}
+            onClose={() => {
+              setAssignSpoolModal(null);
+              queryClient.invalidateQueries({ queryKey: ['spool-assignments', selectedPrinterId] });
+            }}
+            printerId={assignSpoolModal.printerId}
+            amsId={assignSpoolModal.amsId}
+            trayId={assignSpoolModal.trayId}
+            trayInfo={assignSpoolModal.trayInfo}
+          />
+        </div>
       )}
 
       {/* Link spool modal (Spoolman) */}

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-lY8Z-ziM.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C6uWbY2t.css">
+    <script type="module" crossorigin src="/assets/index-CefKSD8n.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
   </head>
   <body>
     <div id="root"></div>