mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 13:01:00 +00:00
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.
This commit is contained in:
1 parent
0784cbcbb1
commit
bed634fd67
2 files changed
+11
-4
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user