mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-18 11:56:01 +02:00
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:
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user