From 0b989bd681c125fb81b6c88141a0d051f11289d9 Mon Sep 17 00:00:00 2001
From: SaladDay <saladday@foxmail.com>
Date: Wed, 1 Jul 2026 08:23:14 +0000
Subject: [PATCH] fix(usage): keep date-range picker calendar on-screen in
 narrow popovers

The custom date-range picker switched to its two-column layout (date
fields | calendar) based on the viewport width via Tailwind `sm:`
(640px). But the popover is clamped to `100vw - 2rem` and anchored to
its trigger with `align="end"`, so its actual available width is not the
viewport width. On narrow windows the wide two-column layout could
activate while the popover only had room for one column, pushing the
calendar column off the right edge of the window where it was clipped
and unusable (month header and 4 of 7 weekday columns cut off).

Gate the two-column layout on the popover's own inline size via a CSS
container query instead of the viewport, and let the popover width
shrink to fit the viewport. When the popover is genuinely wide it shows
two columns; when it is clamped narrow it stacks vertically so the
calendar stays fully visible. The base stacked layout is the safe
fallback for engines without container-query support.

Closes #4669
---
 src/components/usage/UsageDateRangePicker.tsx |  8 ++---
 src/index.css                                 | 33 +++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/usage/UsageDateRangePicker.tsx b/src/components/usage/UsageDateRangePicker.tsx
index 845795a65..86266d9ca 100644
--- a/src/components/usage/UsageDateRangePicker.tsx
+++ b/src/components/usage/UsageDateRangePicker.tsx
@@ -331,7 +331,7 @@ export function UsageDateRangePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[340px] max-w-[calc(100vw-2rem)] p-3 sm:w-[620px]"
+        className="usage-range-popover w-[620px] max-w-[calc(100vw-2rem)] p-3"
         align="end"
       >
         {/* Preset shortcuts */}
@@ -353,9 +353,9 @@ export function UsageDateRangePicker({
           ))}
         </div>
 
-        <div className="flex flex-col gap-3 sm:flex-row">
+        <div className="usage-range-layout flex flex-col gap-3">
           {/* Left: date fields */}
-          <div className="space-y-2 sm:w-[250px] sm:flex-none">
+          <div className="usage-range-fields space-y-2">
             <p className="text-xs text-muted-foreground">
               {t("usage.customRangeHint", "支持日期与时间，最长 30 天")}
             </p>
@@ -403,7 +403,7 @@ export function UsageDateRangePicker({
           </div>
 
           {/* Right: calendar */}
-          <div className="rounded-lg border border-border/50 bg-muted/30 p-2.5 sm:min-w-0 sm:flex-1">
+          <div className="usage-range-calendar rounded-lg border border-border/50 bg-muted/30 p-2.5">
             {/* Month navigation */}
             <div className="flex items-center justify-between mb-1.5">
               <Button
diff --git a/src/index.css b/src/index.css
index dab861f72..5a1fbcb9e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -191,3 +191,36 @@ input[type="password"]::-ms-reveal,
 input[type="password"]::-ms-clear {
   display: none;
 }
+
+/*
+ * Usage date-range picker popover.
+ *
+ * The two-column layout (date fields | calendar) must depend on how much
+ * width the popover itself actually has — not on the viewport. The popover is
+ * clamped to `100vw - 2rem` and anchored to its trigger, so a viewport-based
+ * breakpoint (e.g. Tailwind `sm:`) could enable the wide layout while the
+ * popover only had room for one column, pushing the calendar off-screen.
+ *
+ * A container query keys the layout to the popover's own inline size. The base
+ * (stacked) layout is the safe fallback when container queries are
+ * unsupported, keeping the calendar fully visible at any width.
+ */
+.usage-range-popover {
+  container-type: inline-size;
+}
+
+@container (min-width: 500px) {
+  .usage-range-layout {
+    flex-direction: row;
+  }
+
+  .usage-range-fields {
+    width: 250px;
+    flex: none;
+  }
+
+  .usage-range-calendar {
+    min-width: 0;
+    flex: 1 1 0%;
+  }
+}