yiekheng/cm_whatsapp_bot_v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): tighten the page-header row — smaller buttons, less padding

Browse Source 
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>
This commit is contained in:
yiekheng 2026-05-10 15:25:08 +08:00
parent 7697ea5fcb
commit 9b13223966
4 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/app/reminders/page.tsx
View File

@ -187,12 +187,12 @@ export default async function RemindersPage({ searchParams }: PageProps) {
action={ action={
<Button <Button
asChild asChild
size="lg" size="sm"
className="rounded-full shadow-md hover:shadow-lg transition-all px-6 gap-2 font-semibold" className="rounded-full shadow-sm hover:shadow transition-shadow gap-1.5"
> >
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
<Link href={"/reminders/new" as any} aria-label="New reminder"> <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> <span className="hidden sm:inline">New Reminder</span>
</Link> </Link>
</Button> </Button>

6
apps/web/src/components/accounts-list-view.tsx
View File

@ -36,12 +36,12 @@ export function AccountsListView({ accounts }: AccountsListViewProps) {
action={ action={
<Button <Button
asChild asChild
size="lg" size="sm"
className="rounded-full shadow-md hover:shadow-lg transition-all px-6 gap-2 font-semibold" className="rounded-full shadow-sm hover:shadow transition-shadow gap-1.5"
> >
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
<Link href={"/accounts/new" as any} aria-label="Add account"> <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> <span className="hidden sm:inline">Add Account</span>
</Link> </Link>
</Button> </Button>

3
apps/web/src/components/page-shell.test.tsx
View File

@ -43,7 +43,8 @@ describe("PageShell", () => {
</PageShell>, </PageShell>,
); );
expect(html).toMatch(/max-w-5xl/); 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"'); expect(html).toContain('data-testid="body"');
}); });

4
apps/web/src/components/page-shell.tsx
View File

@ -24,7 +24,7 @@ interface PageShellProps {
*/ */
export function PageShell({ title, action, narrow, children }: PageShellProps) { export function PageShell({ title, action, narrow, children }: PageShellProps) {
return ( 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"> <div className="flex items-center justify-end sm:justify-between gap-4">
<h1 className="hidden sm:block text-2xl font-semibold tracking-tight"> <h1 className="hidden sm:block text-2xl font-semibold tracking-tight">
{title} {title}
@ -32,7 +32,7 @@ export function PageShell({ title, action, narrow, children }: PageShellProps) {
{action} {action}
</div> </div>
{narrow ? ( {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 children
)} )}