소스 검색

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 3 달 전
부모
커밋
8cff425c8d
5개의 변경된 파일17개의 추가작업 그리고 7개의 파일을 삭제
  1. 15 5
      frontend/src/pages/PrintersPage.tsx
  2. 0 0
      static/assets/index-CY4xdITS.js
  3. 0 0
      static/assets/index-CyXgRo_7.css
  4. 0 0
      static/assets/index-KYwGxnG9.css
  5. 2 2
      static/index.html

+ 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) {

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
static/assets/index-CY4xdITS.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
static/assets/index-CyXgRo_7.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 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>

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.