Fix Assign Spool modal clipping on SpoolBuddy display

useEffect in SpoolBuddyAmsPage applies inline styles to the modal
  panel after render (requestAnimationFrame + setTimeout) to cap it
  at 90vh with scrollable content. Targets the DOM directly to avoid
  CSS specificity issues with Tailwind v4.
This commit is contained in:
maziggy
2026-03-26 11:36:35 +01:00
parent e0f0718dfc
commit eed1498d40
3 changed files with 79 additions and 76 deletions
@@ -233,6 +233,32 @@ 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;
@@ -736,42 +762,19 @@ export function SpoolBuddyAmsPage() {
);
})()}
{/* Assign spool modal (inventory) — ref callback constrains modal to viewport on small SpoolBuddy screen */}
{/* Assign spool modal (inventory) */}
{assignSpoolModal && (
<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>
<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) */}
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -23,7 +23,7 @@
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
<script type="module" crossorigin src="/assets/index-CefKSD8n.js"></script>
<script type="module" crossorigin src="/assets/index-DNuHny1V.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CZLTApPU.css">
</head>
<body>