Explorar el Código

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 hace 3 meses
padre
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) {

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
static/assets/index-CY4xdITS.js


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
static/assets/index-CyXgRo_7.css


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 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>

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio