mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-09 15:35:39 +02:00
fix(printers): AMS drying popover scrolls instead of clipping the Start button (#1458)
#1447 added computePopoverPosition() to flip the drying popover above the trigger when below would overflow. Its degraded branch (popover taller than the viewport) keeps the popover below and its comment promised "the user can scroll inside it" -- but the popover div was overflow-hidden with no max-height, so the Start button stayed unreachable on short viewports. Make the promise true: the popover is now a flex column capped at calc(100vh - top - 8px); the body scrolls (overflow-y-auto) and the header/footer are shrink-0, so the Start button is pinned and always reachable. Covers the MacBook + iPhone 15 Pro Max PWA cases in #1458.
This commit is contained in:
@@ -5398,17 +5398,27 @@ function PrinterCard({
|
||||
<div className="fixed inset-0 z-[100]" onClick={() => setDryingPopoverAmsId(null)} />
|
||||
{/* Popover */}
|
||||
<div
|
||||
className="fixed z-[101] w-[240px] bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl overflow-hidden"
|
||||
style={{ top: dryingPopoverPos.top, left: dryingPopoverPos.left }}
|
||||
className="fixed z-[101] flex flex-col w-[240px] bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl overflow-hidden"
|
||||
style={{
|
||||
top: dryingPopoverPos.top,
|
||||
left: dryingPopoverPos.left,
|
||||
// Cap to the space between the popover's top and the bottom
|
||||
// viewport margin (8px, matching computePopoverPosition's
|
||||
// margin). When the popover is taller than that space — short
|
||||
// viewport, landscape phone, zoomed-in — the body scrolls and
|
||||
// the footer stays pinned, so the Start button is always
|
||||
// reachable (#1458 / #1447 follow-up).
|
||||
maxHeight: `calc(100vh - ${dryingPopoverPos.top}px - 8px)`,
|
||||
}}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-3 py-2.5 border-b border-bambu-dark-tertiary">
|
||||
<div className="shrink-0 flex items-center gap-2 px-3 py-2.5 border-b border-bambu-dark-tertiary">
|
||||
<Flame className="w-3.5 h-3.5 text-amber-400" />
|
||||
<span className="text-xs text-white font-medium">{t('printers.drying.start')}</span>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="px-3 py-2.5 space-y-2.5">
|
||||
<div className="px-3 py-2.5 space-y-2.5 overflow-y-auto min-h-0">
|
||||
{/* Filament type select */}
|
||||
<div>
|
||||
<label className="text-[10px] text-bambu-gray mb-1 block">{t('printers.filaments')}</label>
|
||||
@@ -5501,7 +5511,7 @@ function PrinterCard({
|
||||
</label>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<div className="px-3 pb-3">
|
||||
<div className="shrink-0 px-3 pt-2.5 pb-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (dryingPopoverAmsId !== null) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2
-2
@@ -26,8 +26,8 @@
|
||||
|
||||
<!-- Splash screens for iOS -->
|
||||
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
|
||||
<script type="module" crossorigin src="/assets/index-CHKJFwmW.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-KYwGxnG9.css">
|
||||
<script type="module" crossorigin src="/assets/index-CY4xdITS.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CyXgRo_7.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Reference in New Issue
Block a user