From 813191beef06ad44b6f95c5cac607169b91dbd58 Mon Sep 17 00:00:00 2001
From: ivan_yakimkin <gi99lin@yandex.ru>
Date: Thu, 16 Apr 2026 11:29:10 +0300
Subject: [PATCH 1/3] fix: auto-scroll ActivityHeatmap to show current date

The 365-day activity heatmap renders left-to-right from oldest to newest,
but the container with overflow-x:auto starts scrolled to the left edge.
Users cannot see the most recent activity without manually scrolling.

Add a useRef + useEffect that auto-scrolls the grid container to its
right edge after the weeks data is computed, ensuring the current date
and recent activity are immediately visible.
---
 src/shared/components/analytics/charts.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/analytics/charts.tsx b/src/shared/components/analytics/charts.tsx
index f1968951d2..70b839a0cc 100644
--- a/src/shared/components/analytics/charts.tsx
+++ b/src/shared/components/analytics/charts.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
 import { useLocale } from "next-intl";
 import Card from "../Card";
 import { getModelColor } from "@/shared/constants/colors";
@@ -174,6 +174,9 @@ export function CompactStatGrid({ sections }: { sections: CompactStatSection[] }
 // ── ActivityHeatmap ────────────────────────────────────────────────────────
 
 export function ActivityHeatmap({ activityMap }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+
   const cells = useMemo(() => {
     const today = new Date();
     const days = [];
@@ -209,6 +212,14 @@ export function ActivityHeatmap({ activityMap }) {
     return w;
   }, [cells]);
 
+  // Auto-scroll to the right edge so the current date is visible
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [weeks]);
+
+
   const monthLabels = useMemo(() => {
     const labels = [];
     let lastMonth = -1;
@@ -275,7 +286,10 @@ export function ActivityHeatmap({ activityMap }) {
         ))}
       </div>
 
-      <div className="flex gap-[3px] overflow-x-auto">
+      <div
+        ref={scrollRef}
+        className="flex gap-[3px] overflow-x-auto"
+      >
         <div className="flex flex-col gap-[3px] shrink-0 text-[10px] text-text-muted pr-1">
           <span className="h-[10px]"></span>
           <span className="h-[10px] leading-[10px]">Mon</span>

From f10474548bd37fd437fbe5561735427fe6518956 Mon Sep 17 00:00:00 2001
From: ivan_yakimkin <gi99lin@yandex.ru>
Date: Thu, 16 Apr 2026 11:40:42 +0300
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20address=20review=20=E2=80=94=20unifi?=
 =?UTF-8?q?ed=20scroll=20container,=20sticky=20weekday=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap month labels and grid in a single scrollable container so
  month labels stay aligned with date columns during scroll
- Add sticky left-0 + bg-surface to weekday labels (Mon/Wed/Fri)
  so they remain visible when scrolled to the right
- Remove extra blank lines for code style consistency
---
 src/shared/components/analytics/charts.tsx | 75 +++++++++++-----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/shared/components/analytics/charts.tsx b/src/shared/components/analytics/charts.tsx
index 70b839a0cc..77599fbca2 100644
--- a/src/shared/components/analytics/charts.tsx
+++ b/src/shared/components/analytics/charts.tsx
@@ -176,7 +176,6 @@ export function CompactStatGrid({ sections }: { sections: CompactStatSection[] }
 export function ActivityHeatmap({ activityMap }) {
   const scrollRef = useRef<HTMLDivElement>(null);
 
-
   const cells = useMemo(() => {
     const today = new Date();
     const days = [];
@@ -218,8 +217,6 @@ export function ActivityHeatmap({ activityMap }) {
       scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
     }
   }, [weeks]);
-
-
   const monthLabels = useMemo(() => {
     const labels = [];
     let lastMonth = -1;
@@ -270,47 +267,49 @@ export function ActivityHeatmap({ activityMap }) {
         </span>
       </div>
 
-      <div className="flex gap-[3px] mb-1 ml-6" style={{ fontSize: "10px" }}>
-        {monthLabels.map((m, i) => (
-          <span
-            key={i}
-            className="text-text-muted"
-            style={{
-              position: "relative",
-              left: `${m.weekIdx * 13}px`,
-              marginLeft: i === 0 ? 0 : "-20px",
-            }}
-          >
-            {m.label}
-          </span>
-        ))}
-      </div>
-
       <div
         ref={scrollRef}
-        className="flex gap-[3px] overflow-x-auto"
+        className="overflow-x-auto"
       >
-        <div className="flex flex-col gap-[3px] shrink-0 text-[10px] text-text-muted pr-1">
-          <span className="h-[10px]"></span>
-          <span className="h-[10px] leading-[10px]">Mon</span>
-          <span className="h-[10px]"></span>
-          <span className="h-[10px] leading-[10px]">Wed</span>
-          <span className="h-[10px]"></span>
-          <span className="h-[10px] leading-[10px]">Fri</span>
-          <span className="h-[10px]"></span>
+        <div className="flex gap-[3px] mb-1 ml-6" style={{ fontSize: "10px" }}>
+          {monthLabels.map((m, i) => (
+            <span
+              key={i}
+              className="text-text-muted"
+              style={{
+                position: "relative",
+                left: `${m.weekIdx * 13}px`,
+                marginLeft: i === 0 ? 0 : "-20px",
+              }}
+            >
+              {m.label}
+            </span>
+          ))}
         </div>
 
-        {weeks.map((week, wi) => (
-          <div key={wi} className="flex flex-col gap-[3px]">
-            {week.map((day, di) => (
-              <div
-                key={di}
-                title={day ? `${day.date}: ${fmtFull(day.value)} tokens` : ""}
-                className={`w-[10px] h-[10px] rounded-[2px] ${day ? getCellColor(day.value) : "bg-transparent"}`}
-              />
-            ))}
+        <div className="flex gap-[3px]">
+          <div className="flex flex-col gap-[3px] shrink-0 text-[10px] text-text-muted pr-1 sticky left-0 z-10 bg-surface">
+            <span className="h-[10px]"></span>
+            <span className="h-[10px] leading-[10px]">Mon</span>
+            <span className="h-[10px]"></span>
+            <span className="h-[10px] leading-[10px]">Wed</span>
+            <span className="h-[10px]"></span>
+            <span className="h-[10px] leading-[10px]">Fri</span>
+            <span className="h-[10px]"></span>
           </div>
-        ))}
+
+          {weeks.map((week, wi) => (
+            <div key={wi} className="flex flex-col gap-[3px]">
+              {week.map((day, di) => (
+                <div
+                  key={di}
+                  title={day ? `${day.date}: ${fmtFull(day.value)} tokens` : ""}
+                  className={`w-[10px] h-[10px] rounded-[2px] ${day ? getCellColor(day.value) : "bg-transparent"}`}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
       </div>
 
       <div className="flex items-center gap-1 mt-2 ml-6 text-[10px] text-text-muted">

From cb71fb6907827bc68638aedb2162c0667c919e19 Mon Sep 17 00:00:00 2001
From: ivan_yakimkin <gi99lin@yandex.ru>
Date: Thu, 16 Apr 2026 12:14:31 +0300
Subject: [PATCH 3/3] fix: restore horizontal layout with w-max wrapper

---
 src/shared/components/analytics/charts.tsx | 54 +++++++++++-----------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/shared/components/analytics/charts.tsx b/src/shared/components/analytics/charts.tsx
index 77599fbca2..a7649305fb 100644
--- a/src/shared/components/analytics/charts.tsx
+++ b/src/shared/components/analytics/charts.tsx
@@ -271,34 +271,35 @@ export function ActivityHeatmap({ activityMap }) {
         ref={scrollRef}
         className="overflow-x-auto"
       >
-        <div className="flex gap-[3px] mb-1 ml-6" style={{ fontSize: "10px" }}>
-          {monthLabels.map((m, i) => (
-            <span
-              key={i}
-              className="text-text-muted"
-              style={{
-                position: "relative",
-                left: `${m.weekIdx * 13}px`,
-                marginLeft: i === 0 ? 0 : "-20px",
-              }}
-            >
-              {m.label}
-            </span>
-          ))}
-        </div>
-
-        <div className="flex gap-[3px]">
-          <div className="flex flex-col gap-[3px] shrink-0 text-[10px] text-text-muted pr-1 sticky left-0 z-10 bg-surface">
-            <span className="h-[10px]"></span>
-            <span className="h-[10px] leading-[10px]">Mon</span>
-            <span className="h-[10px]"></span>
-            <span className="h-[10px] leading-[10px]">Wed</span>
-            <span className="h-[10px]"></span>
-            <span className="h-[10px] leading-[10px]">Fri</span>
-            <span className="h-[10px]"></span>
+        <div className="w-max">
+          <div className="flex gap-[3px] mb-1 ml-6" style={{ fontSize: "10px" }}>
+            {monthLabels.map((m, i) => (
+              <span
+                key={i}
+                className="text-text-muted"
+                style={{
+                  position: "relative",
+                  left: `${m.weekIdx * 13}px`,
+                  marginLeft: i === 0 ? 0 : "-20px",
+                }}
+              >
+                {m.label}
+              </span>
+            ))}
           </div>
 
-          {weeks.map((week, wi) => (
+          <div className="flex gap-[3px]">
+            <div className="flex flex-col gap-[3px] shrink-0 text-[10px] text-text-muted pr-1 sticky left-0 z-10 bg-surface">
+              <span className="h-[10px]"></span>
+              <span className="h-[10px] leading-[10px]">Mon</span>
+              <span className="h-[10px]"></span>
+              <span className="h-[10px] leading-[10px]">Wed</span>
+              <span className="h-[10px]"></span>
+              <span className="h-[10px] leading-[10px]">Fri</span>
+              <span className="h-[10px]"></span>
+            </div>
+
+            {weeks.map((week, wi) => (
             <div key={wi} className="flex flex-col gap-[3px]">
               {week.map((day, di) => (
                 <div
@@ -311,6 +312,7 @@ export function ActivityHeatmap({ activityMap }) {
           ))}
         </div>
       </div>
+      </div>
 
       <div className="flex items-center gap-1 mt-2 ml-6 text-[10px] text-text-muted">
         <span>Less</span>