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%;
+  }
+}