From 3447e2bac0f5c34b89d4dfca190eb34ac991fab9 Mon Sep 17 00:00:00 2001
From: zihang chen <czhdrive@gmail.com>
Date: Thu, 27 Aug 2026 12:20:13 +0800
Subject: [PATCH] fix(components): show latest usage weeks on compact calendars

Initialize the usage heatmap scroller at its right edge so recent activity is visible when the calendar overflows. Preserve subsequent user-controlled scrolling by applying the position only on mount.

Model: GPT-5
---
 .../components/settings/usage-calendar-visualization.tsx    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/src/components/settings/usage-calendar-visualization.tsx b/packages/components/src/components/settings/usage-calendar-visualization.tsx
index b698566fd..84925a373 100644
--- a/packages/components/src/components/settings/usage-calendar-visualization.tsx
+++ b/packages/components/src/components/settings/usage-calendar-visualization.tsx
@@ -1248,6 +1248,12 @@ function UsageHeatmap({
   // Roving tabindex: the grid is one tab stop, arrow keys walk days and weeks.
   const [focusIndex, setFocusIndex] = useState(() => Math.max(0, todayIndex));
 
+  // Show the newest weeks initially without overriding later user scrolling.
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (scroller) scroller.scrollLeft = scroller.scrollWidth;
+  }, []);
+
   const cellLabel = useCallback(
     (cell: UsageCalendarCell) => {
       const date = formats.day.format(new Date(cell.dayStartMs));