From 68b3da1d132cb44eb709f2401064596c4498654e Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 04:28:49 -0600
Subject: [PATCH] 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 | 2 +-
 components/layout/app-shell.tsx               | 6 +++---
 components/shop/shop-content.tsx              | 3 +--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/avatar/avatar-customize-layout.tsx b/components/avatar/avatar-customize-layout.tsx
index c7bbf3a..6de9399 100644
--- a/components/avatar/avatar-customize-layout.tsx
+++ b/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}
diff --git a/components/layout/app-shell.tsx b/components/layout/app-shell.tsx
index 9a39cff..67fc956 100644
--- a/components/layout/app-shell.tsx
+++ b/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,
         )}
       >
diff --git a/components/shop/shop-content.tsx b/components/shop/shop-content.tsx
index bf7f33e..7d11b90 100644
--- a/components/shop/shop-content.tsx
+++ b/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 (
     <>