From bed634fd671d0ff21d22653d7f8c890428eefefb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 30 Jul 2026 23:21:35 +0200
Subject: [PATCH] Put the new workout blocks on the page's reading edge

SubPageShell insets its own heading to the card body edge rather than the
container edge, so a section heading or a meta line rendered flush left sat
16 px to the left of everything above it. The day-context heading, the sport
chips and the count line now take the same responsive inset.
---
 src/app/insights/workouts/page-client.tsx             | 11 +++++++----
 .../insights/workout-detail/day-context.tsx           |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/insights/workouts/page-client.tsx b/src/app/insights/workouts/page-client.tsx
index 61d879e45..cf0d18691 100644
--- a/src/app/insights/workouts/page-client.tsx
+++ b/src/app/insights/workouts/page-client.tsx
@@ -121,7 +121,10 @@ export default function InsightsWorkoutsPageClient() {
               data-slot="workout-sport-filter"
               role="group"
               aria-label={t("insights.workouts.filterLabel")}
-              className="flex flex-wrap gap-2"
+              // Borderless page-level blocks track the shell heading's own
+              // card inset, so the row, the count line and the h1 above them
+              // share one left edge.
+              className="flex flex-wrap gap-2 px-4 md:px-6"
             >
               {[undefined, ...sportOptions].map((sport) => {
                 const active = sport === sportType;
@@ -150,9 +153,9 @@ export default function InsightsWorkoutsPageClient() {
             <>
               <p
                 data-slot="workout-list-count"
-                className="text-muted-foreground text-xs"
+                className="text-muted-foreground px-4 text-xs md:px-6"
               >
-                {tCount("insights.workouts.count", total, { count: total })}
+                {tCount("insights.workouts.count", total)}
               </p>
               <WorkoutList
                 workouts={workouts}
@@ -165,7 +168,7 @@ export default function InsightsWorkoutsPageClient() {
           ) : (
             <p
               data-slot="workout-list-filter-empty"
-              className="text-muted-foreground text-sm"
+              className="text-muted-foreground px-4 text-sm md:px-6"
             >
               {t("insights.workouts.filterEmpty")}
             </p>
diff --git a/src/components/insights/workout-detail/day-context.tsx b/src/components/insights/workout-detail/day-context.tsx
index 2f1132e7e..5231c340a 100644
--- a/src/components/insights/workout-detail/day-context.tsx
+++ b/src/components/insights/workout-detail/day-context.tsx
@@ -84,6 +84,10 @@ export function WorkoutDetailDayContext({
     <section data-slot="workout-detail-day-context" className="space-y-3">
       <SectionHeading
         icon={CalendarDays}
+        // `SubPageShell` tracks the card body edge for its own heading
+        // rather than the container edge, so this heading takes the same
+        // responsive card inset and every text run on the page shares one x.
+        className="px-4 md:px-6"
         title={t("insights.workouts.detail.thatDayTitle")}
         action={
           <span className="text-muted-foreground text-xs">