diff --git a/components/user/brain/UserPageBrainActivityHeatmap.tsx b/components/user/brain/UserPageBrainActivityHeatmap.tsx
index 94c84887f4..ab11df6a63 100644
--- a/components/user/brain/UserPageBrainActivityHeatmap.tsx
+++ b/components/user/brain/UserPageBrainActivityHeatmap.tsx
@@ -19,11 +19,12 @@ import {
   LOADING_HEATMAP_WEEK_COUNT,
   HEATMAP_VIEWPORT_CLASS_NAME,
   LOADING_MONTH_HEADER_SEGMENTS,
-  MONTH_LABEL_MIN_SPACING_PX,
   MONTH_LABEL_ROW_HEIGHT_PX,
   TOOLTIP_DATE_FORMATTER,
   TOOLTIP_STYLE,
   type HeatmapTooltipData,
+  getHeatmapColumnLeftPx,
+  getHeatmapGridWidthPx,
   getCellFrameClassName,
   getCellNodeClassName,
   getCellTooltipAnchorProps,
@@ -33,7 +34,7 @@ import {
 } from "./userPageBrainActivityHeatmap.helpers";
 import { useHeatmapViewport } from "./userPageBrainActivityHeatmap.viewport";
 
-const LOADING_COLUMN_STRIDE_PX = CELL_SIZE_PX + CELL_GAP_PX;
+const LOADING_GRID_WIDTH_PX = getHeatmapGridWidthPx(LOADING_HEATMAP_WEEK_COUNT);
 const LOADING_HEATMAP_CELLS = Array.from(
   { length: LOADING_HEATMAP_WEEK_COUNT * 7 },
   (_, index) => {
@@ -51,7 +52,7 @@ const LOADING_HEATMAP_CELLS = Array.from(
 );
 
 export function UserPageBrainActivityHeatmapLoading() {
-  const { viewportRef, viewportMetrics } = useHeatmapViewport("loading");
+  const { viewportRef } = useHeatmapViewport("loading");
 
   return (
     <div
@@ -59,26 +60,21 @@ export function UserPageBrainActivityHeatmapLoading() {
       aria-label="Loading activity heatmap"
     >
       <HeatmapDayLabels />
-      <div className="tw-relative tw-min-w-0 tw-flex-1">
-        <HeatmapLoadingMonthLabels
-          scrollLeft={viewportMetrics.scrollLeft}
-          clientWidth={viewportMetrics.clientWidth}
-        />
-        <div ref={viewportRef} className={HEATMAP_VIEWPORT_CLASS_NAME}>
-          <div className={HEATMAP_CONTENT_CLASS_NAME}>
-            <div
-              className="tw-grid tw-animate-pulse tw-grid-flow-col tw-grid-rows-7"
-              aria-hidden="true"
-              style={HEATMAP_GRID_STYLE}
-            >
-              {LOADING_HEATMAP_CELLS.map((cell) => (
-                <HeatmapLoadingCell
-                  key={cell.key}
-                  isPadding={cell.isPadding}
-                  isAccent={cell.isAccent}
-                />
-              ))}
-            </div>
+      <div ref={viewportRef} className={HEATMAP_VIEWPORT_CLASS_NAME}>
+        <div className={HEATMAP_CONTENT_CLASS_NAME}>
+          <HeatmapLoadingMonthLabels />
+          <div
+            className="tw-grid tw-animate-pulse tw-grid-flow-col tw-grid-rows-7"
+            aria-hidden="true"
+            style={HEATMAP_GRID_STYLE}
+          >
+            {LOADING_HEATMAP_CELLS.map((cell) => (
+              <HeatmapLoadingCell
+                key={cell.key}
+                isPadding={cell.isPadding}
+                isAccent={cell.isAccent}
+              />
+            ))}
           </div>
         </div>
       </div>
@@ -92,45 +88,37 @@ export function UserPageBrainActivityHeatmap({
   activity: UserPageBrainActivityViewModel;
 }>) {
   const tooltipId = useId();
-  const { viewportRef, viewportMetrics } = useHeatmapViewport(
-    activity.resetKey
-  );
+  const { viewportRef } = useHeatmapViewport(activity.resetKey);
 
   return (
     <div className="tw-flex tw-gap-3 tw-px-4">
       <HeatmapDayLabels />
-      <div className="tw-relative tw-min-w-0 tw-flex-1">
-        <HeatmapMonthLabels
-          activity={activity}
-          scrollLeft={viewportMetrics.scrollLeft}
-          clientWidth={viewportMetrics.clientWidth}
-        />
-        <div ref={viewportRef} className={HEATMAP_VIEWPORT_CLASS_NAME}>
-          <div className={HEATMAP_CONTENT_CLASS_NAME}>
-            <div
-              className="tw-grid tw-grid-flow-col tw-grid-rows-7"
-              role="img"
-              aria-label={`Public activity heatmap for ${activity.periodLabel}`}
-              style={HEATMAP_GRID_STYLE}
-            >
-              {activity.cells.map((cell) => (
-                <HeatmapCell key={cell.key} cell={cell} tooltipId={tooltipId} />
-              ))}
-            </div>
-            <Tooltip
-              id={tooltipId}
-              place="top"
-              offset={8}
-              opacity={1}
-              style={TOOLTIP_STYLE}
-              render={({ activeAnchor }) => {
-                const tooltipData = getHeatmapTooltipData(activeAnchor);
-                return tooltipData ? (
-                  <HeatmapTooltipContent {...tooltipData} />
-                ) : null;
-              }}
-            />
+      <div ref={viewportRef} className={HEATMAP_VIEWPORT_CLASS_NAME}>
+        <div className={HEATMAP_CONTENT_CLASS_NAME}>
+          <HeatmapMonthLabels activity={activity} />
+          <div
+            className="tw-grid tw-grid-flow-col tw-grid-rows-7"
+            role="img"
+            aria-label={`Public activity heatmap for ${activity.periodLabel}`}
+            style={HEATMAP_GRID_STYLE}
+          >
+            {activity.cells.map((cell) => (
+              <HeatmapCell key={cell.key} cell={cell} tooltipId={tooltipId} />
+            ))}
           </div>
+          <Tooltip
+            id={tooltipId}
+            place="top"
+            offset={8}
+            opacity={1}
+            style={TOOLTIP_STYLE}
+            render={({ activeAnchor }) => {
+              const tooltipData = getHeatmapTooltipData(activeAnchor);
+              return tooltipData ? (
+                <HeatmapTooltipContent {...tooltipData} />
+              ) : null;
+            }}
+          />
         </div>
       </div>
     </div>
@@ -237,39 +225,22 @@ function HeatmapTooltipContent({
   );
 }
 
-function HeatmapLoadingMonthLabels({
-  scrollLeft,
-  clientWidth,
-}: Readonly<{
-  scrollLeft: number;
-  clientWidth: number;
-}>) {
-  const visibleSegments = LOADING_MONTH_HEADER_SEGMENTS.filter((segment) => {
-    const leftPx = segment.labelColumn * LOADING_COLUMN_STRIDE_PX - scrollLeft;
-    const rightPx = leftPx + segment.widthPx;
-
-    if (clientWidth <= 0) {
-      return true;
-    }
-
-    return rightPx >= 0 && leftPx <= clientWidth;
-  });
-
+function HeatmapLoadingMonthLabels() {
   return (
     <div
       className="tw-relative tw-mb-1 tw-overflow-hidden"
       aria-hidden="true"
       style={{
         height: `${MONTH_LABEL_ROW_HEIGHT_PX}px`,
-        minWidth: `${MONTH_LABEL_MIN_SPACING_PX}px`,
+        width: `${LOADING_GRID_WIDTH_PX}px`,
       }}
     >
-      {visibleSegments.map((segment) => (
+      {LOADING_MONTH_HEADER_SEGMENTS.map((segment) => (
         <span
           key={segment.key}
           className="tw-absolute tw-bottom-0 tw-h-[5px] tw-animate-pulse tw-rounded-full tw-bg-white/[0.08]"
           style={{
-            left: `${segment.labelColumn * LOADING_COLUMN_STRIDE_PX - scrollLeft}px`,
+            left: `${getHeatmapColumnLeftPx(segment.labelColumn)}px`,
             width: `${segment.widthPx}px`,
           }}
         />
@@ -280,24 +251,20 @@ function HeatmapLoadingMonthLabels({
 
 function HeatmapMonthLabels({
   activity,
-  scrollLeft,
-  clientWidth,
 }: Readonly<{
   activity: UserPageBrainActivityViewModel;
-  scrollLeft: number;
-  clientWidth: number;
 }>) {
-  const placedMonthLabels = getPlacedMonthLabels(
-    activity.monthLabels,
-    scrollLeft,
-    clientWidth
-  );
+  const placedMonthLabels = getPlacedMonthLabels(activity.monthLabels);
+  const gridWidthPx = getHeatmapGridWidthPx(activity.weekCount);
 
   return (
     <div
       className="tw-relative tw-mb-1 tw-overflow-hidden tw-text-[9px] tw-font-semibold tw-uppercase tw-tracking-widest tw-text-iron-600"
       aria-hidden="true"
-      style={{ height: `${MONTH_LABEL_ROW_HEIGHT_PX}px` }}
+      style={{
+        height: `${MONTH_LABEL_ROW_HEIGHT_PX}px`,
+        width: `${gridWidthPx}px`,
+      }}
     >
       {placedMonthLabels.map((label) => (
         <span
diff --git a/components/user/brain/UserPageBrainSidebarMobileStrip.tsx b/components/user/brain/UserPageBrainSidebarMobileStrip.tsx
index 1231c1f479..b1ba7e718f 100644
--- a/components/user/brain/UserPageBrainSidebarMobileStrip.tsx
+++ b/components/user/brain/UserPageBrainSidebarMobileStrip.tsx
@@ -40,14 +40,14 @@ function UserPageBrainSidebarMobileWavePill({
       prefetch={false}
       className="tw-group tw-inline-flex tw-h-9 tw-max-w-[14rem] tw-items-center tw-gap-2 tw-rounded-lg tw-border tw-border-solid tw-border-white/[0.08] tw-bg-iron-950 tw-p-1 tw-pr-3 tw-no-underline tw-shadow-sm tw-transition-all tw-duration-200 desktop-hover:hover:tw-border-white/[0.15] desktop-hover:hover:tw-bg-white/[0.05]"
     >
-      <div className="tw-relative tw-flex tw-h-7 tw-w-7 tw-shrink-0 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-solid tw-border-white/10 tw-bg-iron-900">
+      <div className="tw-relative tw-flex tw-h-7 tw-w-7 tw-shrink-0 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-solid tw-border-white/[0.04] tw-bg-iron-900 tw-shadow-sm tw-transition-colors desktop-hover:group-hover:tw-border-white/[0.1]">
         {imageSrc ? (
           <Image
             src={imageSrc}
             alt={wave.name ? `Wave ${wave.name}` : "Wave picture"}
             fill
             sizes="28px"
-            className="tw-object-cover tw-transition-transform tw-duration-300 desktop-hover:group-hover:tw-scale-105"
+            className="tw-object-cover"
           />
         ) : (
           <FallbackIcon className="tw-h-3.5 tw-w-3.5 tw-flex-shrink-0 tw-text-iron-300" />
diff --git a/components/user/brain/UserPageBrainSidebarWaveItem.tsx b/components/user/brain/UserPageBrainSidebarWaveItem.tsx
index 8d914ce4e9..1a31e96018 100644
--- a/components/user/brain/UserPageBrainSidebarWaveItem.tsx
+++ b/components/user/brain/UserPageBrainSidebarWaveItem.tsx
@@ -71,19 +71,18 @@ export default function UserPageBrainSidebarWaveItem({
       prefetch={false}
       className="tw-group tw-flex tw-cursor-pointer tw-items-center tw-gap-3 tw-rounded-xl tw-border tw-border-solid tw-border-white/10 tw-bg-iron-950/80 tw-p-3 tw-no-underline tw-shadow-2xl tw-transition-all desktop-hover:hover:tw-border-white/15"
     >
-      <div className="tw-relative tw-h-10 tw-w-10 tw-shrink-0 tw-overflow-hidden tw-rounded-full tw-border tw-border-solid tw-border-white/10">
-        <div className="tw-absolute tw-inset-0 tw-z-10 tw-transition-colors desktop-hover:group-hover:tw-bg-transparent" />
+      <div className="tw-relative tw-h-10 tw-w-10 tw-shrink-0 tw-overflow-hidden tw-rounded-full tw-border tw-border-solid tw-border-white/[0.04] tw-bg-iron-900 tw-shadow-sm tw-transition-colors desktop-hover:group-hover:tw-border-white/[0.1]">
         {imageSrc ? (
           <Image
             src={imageSrc}
             alt={wave.name ? `Wave ${wave.name}` : "Wave picture"}
             fill
             sizes="40px"
-            className="tw-object-cover tw-transition-transform tw-duration-500 tw-will-change-transform desktop-hover:group-hover:tw-scale-110"
+            className="tw-object-cover"
           />
         ) : (
           <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-iron-900">
-            <FallbackIcon className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-iron-300 tw-transition-transform tw-duration-500 tw-will-change-transform desktop-hover:group-hover:tw-scale-110" />
+            <FallbackIcon className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-iron-300" />
           </div>
         )}
       </div>
diff --git a/components/user/brain/userPageBrainActivityHeatmap.helpers.ts b/components/user/brain/userPageBrainActivityHeatmap.helpers.ts
index 979c3ece3c..cc9a5799a0 100644
--- a/components/user/brain/userPageBrainActivityHeatmap.helpers.ts
+++ b/components/user/brain/userPageBrainActivityHeatmap.helpers.ts
@@ -46,8 +46,7 @@ export const LOADING_MONTH_HEADER_SEGMENTS = [
   { key: "feb", labelColumn: 44, widthPx: 18 },
   { key: "mar", labelColumn: 48, widthPx: 20 },
 ] as const;
-export const MONTH_LABEL_MIN_SPACING_PX = 34;
-const MONTH_LABEL_OVERFLOW_TOLERANCE_PX = 18;
+const MONTH_LABEL_MIN_SPACING_PX = 34;
 export const TOOLTIP_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
   month: "short",
   day: "numeric",
@@ -62,8 +61,8 @@ export const TOOLTIP_STYLE = {
   pointerEvents: "none",
 } as const;
 export const HEATMAP_VIEWPORT_CLASS_NAME =
-  "tw-[scrollbar-gutter:stable] tw-flex-1 tw-overflow-x-auto tw-overflow-y-hidden tw-pb-3 tw-scrollbar-thin tw-scrollbar-track-transparent tw-scrollbar-thumb-iron-700/60 desktop-hover:hover:tw-scrollbar-thumb-iron-600/80";
-export const HEATMAP_CONTENT_CLASS_NAME = "tw-inline-flex tw-pr-2";
+  "horizontal-menu-scrollable-x tw-[scrollbar-gutter:stable] tw-flex-1 tw-overflow-x-auto tw-overflow-y-hidden tw-overscroll-x-contain tw-pb-3 tw-scrollbar-thin tw-scrollbar-track-transparent tw-scrollbar-thumb-iron-700/60 [touch-action:pan-x] desktop-hover:hover:tw-scrollbar-thumb-iron-600/80";
+export const HEATMAP_CONTENT_CLASS_NAME = "tw-inline-flex tw-flex-col tw-pr-2";
 export const HEATMAP_GRID_STYLE = {
   gridTemplateRows: `repeat(7, ${CELL_SIZE_PX}px)`,
   gridAutoColumns: `${CELL_SIZE_PX}px`,
@@ -74,6 +73,18 @@ export const CELL_FRAME_STYLE = {
   height: `${CELL_SIZE_PX}px`,
 } as const;
 
+export function getHeatmapColumnLeftPx(column: number): number {
+  return column * COLUMN_STRIDE_PX;
+}
+
+export function getHeatmapGridWidthPx(weekCount: number): number {
+  if (weekCount <= 0) {
+    return 0;
+  }
+
+  return weekCount * COLUMN_STRIDE_PX - CELL_GAP_PX;
+}
+
 // Cell presentation
 const CELL_NODE_CLASS_NAMES: Readonly<
   Record<
@@ -183,7 +194,7 @@ export function getCellFrameClassName(cell: UserPageBrainActivityCell): string {
   }
 
   return clsx(
-    "tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-colors tw-duration-200",
+    "tw-flex tw-items-center tw-justify-center tw-rounded desktop-hover:tw-transition-colors desktop-hover:tw-duration-200",
     cell.ariaLabel &&
       "tw-cursor-pointer desktop-hover:hover:tw-z-20 desktop-hover:hover:tw-bg-[#171b21]"
   );
@@ -195,36 +206,21 @@ export function getCellNodeClassName(
 ): string {
   return clsx(
     variant === "grid" &&
-      "tw-transform-gpu tw-transition-all tw-duration-200 tw-ease-out",
+      "desktop-hover:tw-transform-gpu desktop-hover:tw-transition-all desktop-hover:tw-duration-200 desktop-hover:tw-ease-out",
     CELL_NODE_CLASS_NAMES[variant][cell.intensity]
   );
 }
 
 // Month label placement
 export function getPlacedMonthLabels(
-  monthLabels: readonly HeatmapMonthLabel[],
-  scrollLeft: number,
-  clientWidth: number
+  monthLabels: readonly HeatmapMonthLabel[]
 ): readonly PlacedMonthLabel[] {
   const placedMonthLabels: PlacedMonthLabel[] = [];
   let nextMinimumLeftPx = 0;
 
   for (const label of monthLabels) {
-    const naturalLeftPx = label.labelColumn * COLUMN_STRIDE_PX - scrollLeft;
+    const leftPx = getHeatmapColumnLeftPx(label.firstVisibleColumn);
 
-    if (
-      clientWidth > 0 &&
-      (naturalLeftPx < -MONTH_LABEL_OVERFLOW_TOLERANCE_PX ||
-        naturalLeftPx > clientWidth)
-    ) {
-      continue;
-    }
-
-    const leftPx = Math.max(-MONTH_LABEL_OVERFLOW_TOLERANCE_PX, naturalLeftPx);
-
-    if (clientWidth > 0 && leftPx >= clientWidth) {
-      continue;
-    }
     if (leftPx < nextMinimumLeftPx) {
       continue;
     }
diff --git a/components/user/brain/userPageBrainActivityHeatmap.viewport.ts b/components/user/brain/userPageBrainActivityHeatmap.viewport.ts
index 3af3a60f79..b3eade6abc 100644
--- a/components/user/brain/userPageBrainActivityHeatmap.viewport.ts
+++ b/components/user/brain/userPageBrainActivityHeatmap.viewport.ts
@@ -1,25 +1,4 @@
-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useSyncExternalStore,
-} from "react";
-
-type ViewportMetrics = Readonly<{
-  scrollLeft: number;
-  clientWidth: number;
-  scrollWidth: number;
-}>;
-
-type MutableValueRef<T> = {
-  current: T;
-};
-
-const EMPTY_VIEWPORT_METRICS: ViewportMetrics = {
-  scrollLeft: 0,
-  clientWidth: 0,
-  scrollWidth: 0,
-};
+import { useCallback, useLayoutEffect, useRef } from "react";
 
 function snapViewportToLatest(viewport: HTMLDivElement | null) {
   if (!viewport) {
@@ -34,102 +13,16 @@ function snapViewportToLatest(viewport: HTMLDivElement | null) {
   viewport.scrollLeft = maxScrollLeft;
 }
 
-function readViewportMetrics(
-  viewport: HTMLDivElement | null,
-  cachedMetricsRef: MutableValueRef<ViewportMetrics>
-): ViewportMetrics {
-  if (!viewport) {
-    return EMPTY_VIEWPORT_METRICS;
-  }
-
-  const nextMetrics = {
-    scrollLeft: viewport.scrollLeft,
-    clientWidth: viewport.clientWidth,
-    scrollWidth: viewport.scrollWidth,
-  } as const;
-  const previousMetrics = cachedMetricsRef.current;
-
-  if (
-    previousMetrics.scrollLeft === nextMetrics.scrollLeft &&
-    previousMetrics.clientWidth === nextMetrics.clientWidth &&
-    previousMetrics.scrollWidth === nextMetrics.scrollWidth
-  ) {
-    return previousMetrics;
-  }
-
-  cachedMetricsRef.current = nextMetrics;
-  return nextMetrics;
-}
-
-function subscribeToViewportMetrics(
-  viewport: HTMLDivElement | null,
-  onStoreChange: () => void
-) {
-  if (!viewport) {
-    return () => {};
-  }
-
-  const content = viewport.firstElementChild;
-  let frameId = 0;
-
-  const notify = () => {
-    cancelAnimationFrame(frameId);
-    frameId = requestAnimationFrame(onStoreChange);
-  };
-
-  notify();
-  viewport.addEventListener("scroll", notify, { passive: true });
-
-  if (typeof ResizeObserver === "undefined") {
-    window.addEventListener("resize", notify);
-
-    return () => {
-      cancelAnimationFrame(frameId);
-      viewport.removeEventListener("scroll", notify);
-      window.removeEventListener("resize", notify);
-    };
-  }
-
-  const resizeObserver = new ResizeObserver(notify);
-  resizeObserver.observe(viewport);
-  if (content) {
-    resizeObserver.observe(content);
-  }
-
-  return () => {
-    cancelAnimationFrame(frameId);
-    viewport.removeEventListener("scroll", notify);
-    resizeObserver.disconnect();
-  };
-}
-
 export function useHeatmapViewport(resetKey?: string) {
   const viewportRef = useRef<HTMLDivElement | null>(null);
-  const cachedMetricsRef = useRef(EMPTY_VIEWPORT_METRICS);
 
   const setViewportRef = useCallback((node: HTMLDivElement | null) => {
     viewportRef.current = node;
-    cachedMetricsRef.current = EMPTY_VIEWPORT_METRICS;
   }, []);
 
   useLayoutEffect(() => {
-    cachedMetricsRef.current = EMPTY_VIEWPORT_METRICS;
     snapViewportToLatest(viewportRef.current);
   }, [resetKey]);
 
-  const getViewportSnapshot = useCallback(() => {
-    return readViewportMetrics(viewportRef.current, cachedMetricsRef);
-  }, []);
-
-  const subscribeToViewport = useCallback((onStoreChange: () => void) => {
-    return subscribeToViewportMetrics(viewportRef.current, onStoreChange);
-  }, []);
-
-  const viewportMetrics = useSyncExternalStore(
-    subscribeToViewport,
-    getViewportSnapshot,
-    () => EMPTY_VIEWPORT_METRICS
-  );
-
-  return { viewportRef: setViewportRef, viewportMetrics };
+  return { viewportRef: setViewportRef };
 }