Browse Source

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.
maziggy 6 days ago
parent
commit
8cff425c8d

+ 15 - 5
frontend/src/pages/PrintersPage.tsx

@@ -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 it is too large
+ 0 - 0
static/assets/index-CY4xdITS.js


File diff suppressed because it is too large
+ 0 - 0
static/assets/index-CyXgRo_7.css


File diff suppressed because it is too large
+ 0 - 0
static/assets/index-KYwGxnG9.css


+ 2 - 2
static/index.html

@@ -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>

Some files were not shown because too many files changed in this diff