From 5d91b904f2dbacaef1f68dedb2e12d0b742cbd60 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 13:45:01 +0800
Subject: [PATCH] refactor(ui): hide page-title H1 on mobile (header already
 shows it)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mobile header strip carries the current section title in its centre
slot ("Dashboard" / "Reminders" / etc.). The top-level pages were
ALSO rendering the same string in an H1 right below — duplicate
labelling, wasted vertical space, and the H1 was the first thing
that overlapped the header on tight viewports.

Switched the four duplicates to `hidden sm:block`:
  - / (Dashboard)
  - /reminders
  - /activity
  - /settings

Desktop sidebar has no per-page title chip, so the H1 stays visible
sm: and up. Sub-pages (account detail, group detail, reminder
detail, "New Reminder", "Add Account") have dynamic H1s that don't
duplicate the header — those keep their visibility unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/activity/page.tsx  | 3 ++-
 apps/web/src/app/page.tsx           | 3 ++-
 apps/web/src/app/reminders/page.tsx | 3 ++-
 apps/web/src/app/settings/page.tsx  | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/activity/page.tsx b/apps/web/src/app/activity/page.tsx
index db18c37..8ebc06a 100644
--- a/apps/web/src/app/activity/page.tsx
+++ b/apps/web/src/app/activity/page.tsx
@@ -184,7 +184,8 @@ export default async function ActivityPage({ searchParams }: PageProps) {
   return (
     <div className="px-4 py-6 sm:px-6 sm:py-8 max-w-5xl mx-auto space-y-6">
       <div className="flex items-center justify-between gap-4">
-        <h1 className="text-2xl font-semibold tracking-tight">Activity</h1>
+        {/* Hidden on mobile — the top header already shows "Activity". */}
+        <h1 className="hidden sm:block text-2xl font-semibold tracking-tight">Activity</h1>
         {hasAny && !showingArchived && (
           <Dialog>
             <DialogTrigger asChild>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index a51da62..5e72b2a 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -155,7 +155,8 @@ export default async function DashboardPage() {
 
   return (
     <div className="px-4 py-6 sm:px-6 sm:py-8 max-w-5xl mx-auto space-y-8">
-      <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+      {/* Hidden on mobile — the top header already shows "Dashboard". */}
+      <h1 className="hidden sm:block text-2xl font-semibold tracking-tight">Dashboard</h1>
 
       {/* Stat cards — click to drill into the corresponding tab */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
diff --git a/apps/web/src/app/reminders/page.tsx b/apps/web/src/app/reminders/page.tsx
index 491b6bd..a11379a 100644
--- a/apps/web/src/app/reminders/page.tsx
+++ b/apps/web/src/app/reminders/page.tsx
@@ -182,7 +182,8 @@ export default async function RemindersPage({ searchParams }: PageProps) {
   return (
     <div className="px-4 py-6 sm:px-6 sm:py-8 max-w-5xl mx-auto space-y-6">
       <div className="flex items-center justify-between gap-4">
-        <h1 className="text-2xl font-semibold tracking-tight">Reminders</h1>
+        {/* Hidden on mobile — the top header already shows "Reminders". */}
+        <h1 className="hidden sm:block text-2xl font-semibold tracking-tight">Reminders</h1>
         <Button asChild size="sm">
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
           <Link href={"/reminders/new" as any}>
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index cdcef81..8a23359 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -8,7 +8,8 @@ export default async function SettingsPage() {
   const op = await getSeededOperator();
   return (
     <div className="container mx-auto max-w-2xl space-y-6 p-4 sm:p-6">
-      <h1 className="text-2xl font-semibold">Settings</h1>
+      {/* Hidden on mobile — the top header already shows "Settings". */}
+      <h1 className="hidden sm:block text-2xl font-semibold">Settings</h1>
 
       <Card>
         <CardHeader>