diff --git a/web/src/components/Table.tsx b/web/src/components/Table.tsx
index 40c6b24..702b5a3 100644
--- a/web/src/components/Table.tsx
+++ b/web/src/components/Table.tsx
@@ -225,7 +225,9 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
       </header>
 
       <div className="table-body">
-        <main className="table-main">
+        {/* The shop lays out wide (a 4-card buy row plus a spreading deck), so it
+            gets the extra desktop width; other phases keep the portrait column. */}
+        <main className={`table-main ${view.phase === 'shop' ? 'is-wide' : ''}`}>
           {view.phase === 'lobby' && <Lobby view={view} send={send} />}
           {view.phase === 'shop' && <ShopPhase view={view} you={you} send={send} />}
           {view.phase === 'arrange' && <ArrangePhase view={view} you={you} send={send} />}
diff --git a/web/src/styles.css b/web/src/styles.css
index 68bfe41..d68ec74 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -619,6 +619,18 @@ h3 {
   margin: 0 auto;
 }
 
+/* Desktop: the shop wants horizontal room the portrait column can't give it —
+   the 4-card buy row alone needs ~676px to stay on one line, and the deck
+   spreads wider still. Once the viewport can spare the width, let the shop
+   (only) expand past the 620px column the other phases keep. Below this
+   breakpoint, and on phones (see the max-width query), it falls back to the
+   full-width portrait layout and the buy row wraps as before. */
+@media (min-width: 720px) {
+  .table-main.is-wide {
+    max-width: 1000px;
+  }
+}
+
 /* ---------- event log ---------- */
 /* A pinned-up ledger of what happened, paper-warm against the felt. */