From 5c884b3d0ef2aea6b746b4279bb0be045ab68b01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 01:59:25 +0200
Subject: [PATCH] style(layout): tighter mobile bottom-nav buffer + muted
 trend-hint title + drop font-mono on progress

- P7: shrink the bottom-nav clearance from 5rem to 4rem on mobile (md:pb-0 unchanged) so content sits closer to the nav without overlap.
- P8: TrendHint title gets text-muted-foreground so it stops competing with chart titles after the T2 muted-foreground hierarchy fix.
- P9: drop font-mono from the onboarding "X%" progress label; tabular-nums alone is enough.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/charts/trend-hint.tsx                    | 4 +++-
 src/components/layout/auth-shell.tsx                    | 2 +-
 src/components/onboarding/getting-started-checklist.tsx | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/trend-hint.tsx b/src/components/charts/trend-hint.tsx
index 13f64f844..8b767ebe7 100644
--- a/src/components/charts/trend-hint.tsx
+++ b/src/components/charts/trend-hint.tsx
@@ -34,7 +34,9 @@ export function TrendHint({ count }: TrendHintProps) {
       variant="plain"
       size="compact"
       icon={<TrendingUp className="size-4" />}
-      title={t("trendHints.title")}
+      title={
+        <span className="text-muted-foreground">{t("trendHints.title")}</span>
+      }
       description={description}
     />
   );
diff --git a/src/components/layout/auth-shell.tsx b/src/components/layout/auth-shell.tsx
index 68042d9a0..a4573d713 100644
--- a/src/components/layout/auth-shell.tsx
+++ b/src/components/layout/auth-shell.tsx
@@ -126,7 +126,7 @@ export function AuthShell({ children }: { children: React.ReactNode }) {
           <TopBar />
           <main
             id="main-content"
-            className="flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))] md:pb-0"
+            className="flex-1 overflow-y-auto pb-[calc(4rem+env(safe-area-inset-bottom,0px))] md:pb-0"
           >
             <div className="mx-auto max-w-[76.8rem] px-4 py-6 md:px-6">
               {children}
diff --git a/src/components/onboarding/getting-started-checklist.tsx b/src/components/onboarding/getting-started-checklist.tsx
index 71c6cb32a..7eab0eb1a 100644
--- a/src/components/onboarding/getting-started-checklist.tsx
+++ b/src/components/onboarding/getting-started-checklist.tsx
@@ -296,7 +296,7 @@ export function GettingStartedChecklist() {
               total: progress.total,
             })}
           </span>
-          <span className="font-mono tabular-nums">{progress.percent}%</span>
+          <span className="tabular-nums">{progress.percent}%</span>
         </div>
         <div className="bg-muted h-1.5 overflow-hidden rounded-full">
           <div