Keep single-column layout on mobile until desktop breakpoints.

Wide max-widths and shop grids now only expand at lg/xl, not sm/md.

components/avatar/avatar-customize-layout.tsx

@@ -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">
       <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
           eyebrow={eyebrow}
           title={title}

components/layout/app-shell.tsx

@@ -10,8 +10,8 @@ type AppShellProps = {
 };
 
 const contentWidthClass = {
-  default: "max-w-lg md:max-w-2xl lg:max-w-4xl",
-  wide: "max-w-lg md:max-w-3xl lg:max-w-6xl",
+  default: "max-w-lg lg:max-w-4xl",
+  wide: "max-w-lg lg:max-w-6xl",
 } as const;
 
 export function AppShell({
@@ -25,7 +25,7 @@ export function AppShell({
       <AppTopBar />
       <main
         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,
         )}
       >

components/shop/shop-content.tsx

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