Fix Assign Spool modal clipping on SpoolBuddy display

Added data-spoolbuddy-kiosk attribute to the SpoolBuddy layout and
  global CSS rules that cap modals at 90vh with scrollable content on
  the small touchscreen, without modifying shared components.

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,23 @@ 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,39 +736,19 @@ export function SpoolBuddyAmsPage() {
         );
       })()}
 
-      {/* Assign spool modal (inventory) — scoped styles constrain to viewport for small SpoolBuddy screen */}
+      {/* Assign spool modal (inventory) */}
       {assignSpoolModal && (
-        <>
-          <style>{`
-            [data-sb-assign] [class*="max-w-2xl"] {
-              max-height: 90vh !important;
-              display: flex !important;
-              flex-direction: column !important;
-            }
-            [data-sb-assign] [class*="max-w-2xl"] > [class*="space-y"] {
-              flex: 1 1 0 !important;
-              min-height: 0 !important;
-              overflow-y: auto !important;
-            }
-            [data-sb-assign] [class*="max-w-2xl"] > [class*="border-b"],
-            [data-sb-assign] [class*="max-w-2xl"] > [class*="border-t"] {
-              flex-shrink: 0 !important;
-            }
-          `}</style>
-          <div data-sb-assign="">
-            <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>
-        </>
+        <AssignSpoolModal
+          isOpen={!!assignSpoolModal}
+          onClose={() => {
+            setAssignSpoolModal(null);
+            queryClient.invalidateQueries({ queryKey: ['spool-assignments', selectedPrinterId] });
+          }}
+          printerId={assignSpoolModal.printerId}
+          amsId={assignSpoolModal.amsId}
+          trayId={assignSpoolModal.trayId}
+          trayInfo={assignSpoolModal.trayInfo}
+        />
       )}
 
       {/* 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-ydLRgpbj.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
+    <script type="module" crossorigin src="/assets/index-lY8Z-ziM.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C6uWbY2t.css">
   </head>
   <body>
     <div id="root"></div>