RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep single-column layout on mobile until desktop breakpoints.

Browse Source 
Wide max-widths and shop grids now only expand at lg/xl, not sm/md.
This commit is contained in:
Harkamal Randhawa
2026-05-24 04:28:49 -06:00
parent 91cced4c75
commit 68b3da1d13
3 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/avatar/avatar-customize-layout.tsx
View File

@@ -18,7 +18,7 @@ export function AvatarCustomizeLayout({
<div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar"> <div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
<AppTopBar /> <AppTopBar />
<main className="mx-auto max-w-lg px-4 py-6 md:max-w-3xl md:px-5 lg:max-w-6xl"> <main className="mx-auto max-w-lg px-4 py-6 lg:max-w-6xl lg:px-5">
<AppPageHeader <AppPageHeader
eyebrow={eyebrow} eyebrow={eyebrow}
title={title} title={title}

6
components/layout/app-shell.tsx
View File

@@ -10,8 +10,8 @@ type AppShellProps = {
}; };
const contentWidthClass = { const contentWidthClass = {
default: "max-w-lg md:max-w-2xl lg:max-w-4xl", default: "max-w-lg lg:max-w-4xl",
wide: "max-w-lg md:max-w-3xl lg:max-w-6xl", wide: "max-w-lg lg:max-w-6xl",
} as const; } as const;
export function AppShell({ export function AppShell({
@@ -25,7 +25,7 @@ export function AppShell({
<AppTopBar /> <AppTopBar />
<main <main
className={cn( className={cn(
"mx-auto px-4 py-6 md:px-5", "mx-auto px-4 py-6 lg:px-5",
wide ? contentWidthClass.wide : contentWidthClass.default, wide ? contentWidthClass.wide : contentWidthClass.default,
)} )}
> >

3
components/shop/shop-content.tsx
View File

@@ -201,8 +201,7 @@ export function ShopContent() {
const roomItems = items.filter((item) => item.type === "room"); const roomItems = items.filter((item) => item.type === "room");
const itemGridClassName = const itemGridClassName = "grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3";
"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3";
return ( return (
<> <>