From 9b13223966b061e194b01c2b0683a660e500607a Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sun, 10 May 2026 15:25:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20tighten=20the=20page-header=20row?=
 =?UTF-8?q?=20=E2=80=94=20smaller=20buttons,=20less=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Action buttons drop from size=lg with px-6 + font-semibold to a
compact size=sm pill with a subtle shadow. PageShell trims mobile
top padding from 24px to 16px and the inter-section gap from 24px
to 16px on small screens (desktop unchanged) so the header row
doesn't dominate the top of the page when the H1 is hidden.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app/reminders/page.tsx            | 6 +++---
 apps/web/src/components/accounts-list-view.tsx | 6 +++---
 apps/web/src/components/page-shell.test.tsx    | 3 ++-
 apps/web/src/components/page-shell.tsx         | 4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/reminders/page.tsx b/apps/web/src/app/reminders/page.tsx
index 373f8fe..2bc0cef 100644
--- a/apps/web/src/app/reminders/page.tsx
+++ b/apps/web/src/app/reminders/page.tsx
@@ -187,12 +187,12 @@ export default async function RemindersPage({ searchParams }: PageProps) {
       action={
         <Button
           asChild
-          size="lg"
-          className="rounded-full shadow-md hover:shadow-lg transition-all px-6 gap-2 font-semibold"
+          size="sm"
+          className="rounded-full shadow-sm hover:shadow transition-shadow gap-1.5"
         >
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
           <Link href={"/reminders/new" as any} aria-label="New reminder">
-            <PlusIcon className="size-5" />
+            <PlusIcon className="size-3.5" />
             <span className="hidden sm:inline">New Reminder</span>
           </Link>
         </Button>
diff --git a/apps/web/src/components/accounts-list-view.tsx b/apps/web/src/components/accounts-list-view.tsx
index e62d478..6ef27d4 100644
--- a/apps/web/src/components/accounts-list-view.tsx
+++ b/apps/web/src/components/accounts-list-view.tsx
@@ -36,12 +36,12 @@ export function AccountsListView({ accounts }: AccountsListViewProps) {
       action={
         <Button
           asChild
-          size="lg"
-          className="rounded-full shadow-md hover:shadow-lg transition-all px-6 gap-2 font-semibold"
+          size="sm"
+          className="rounded-full shadow-sm hover:shadow transition-shadow gap-1.5"
         >
           {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
           <Link href={"/accounts/new" as any} aria-label="Add account">
-            <PlusIcon className="size-5" />
+            <PlusIcon className="size-3.5" />
             <span className="hidden sm:inline">Add Account</span>
           </Link>
         </Button>
diff --git a/apps/web/src/components/page-shell.test.tsx b/apps/web/src/components/page-shell.test.tsx
index ec5946f..e9c61e5 100644
--- a/apps/web/src/components/page-shell.test.tsx
+++ b/apps/web/src/components/page-shell.test.tsx
@@ -43,7 +43,8 @@ describe("PageShell", () => {
       </PageShell>,
     );
     expect(html).toMatch(/max-w-5xl/);
-    expect(html).toMatch(/px-4 py-6 sm:px-6 sm:py-8/);
+    expect(html).toMatch(/px-4 py-4 sm:px-6 sm:py-8/);
+    expect(html).toMatch(/space-y-4 sm:space-y-6/);
     expect(html).toContain('data-testid="body"');
   });
 
diff --git a/apps/web/src/components/page-shell.tsx b/apps/web/src/components/page-shell.tsx
index 2486b62..dd369c3 100644
--- a/apps/web/src/components/page-shell.tsx
+++ b/apps/web/src/components/page-shell.tsx
@@ -24,7 +24,7 @@ interface PageShellProps {
  */
 export function PageShell({ title, action, narrow, children }: PageShellProps) {
   return (
-    <div className="px-4 py-6 sm:px-6 sm:py-8 max-w-5xl mx-auto space-y-6">
+    <div className="px-4 py-4 sm:px-6 sm:py-8 max-w-5xl mx-auto space-y-4 sm:space-y-6">
       <div className="flex items-center justify-end sm:justify-between gap-4">
         <h1 className="hidden sm:block text-2xl font-semibold tracking-tight">
           {title}
@@ -32,7 +32,7 @@ export function PageShell({ title, action, narrow, children }: PageShellProps) {
         {action}
       </div>
       {narrow ? (
-        <div className="max-w-2xl mx-auto space-y-6">{children}</div>
+        <div className="max-w-2xl mx-auto space-y-4 sm:space-y-6">{children}</div>
       ) : (
         children
       )}