diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css
index 4585367f..4724b36a 100644
--- a/app/assets/stylesheets/wardrobe/show.css
+++ b/app/assets/stylesheets/wardrobe/show.css
@@ -9,23 +9,32 @@ body.wardrobe-v2 {
 }
 
 .wardrobe-container {
-  display: flex;
+  display: grid;
   height: 100vh;
   background: #000;
 
-  @media (max-width: 800px) {
-    flex-direction: column;
+  /* Mobile: vertical stack with preview on top, controls below */
+  grid-template-areas:
+    "preview"
+    "controls";
+  grid-template-rows: minmax(100px, 45%) minmax(300px, 55%);
+  grid-template-columns: 100%;
+
+  /* Desktop: side-by-side layout */
+  @media (min-width: 801px) {
+    grid-template-areas: "preview controls";
+    grid-template-rows: 100%;
+    grid-template-columns: 50% 50%;
   }
 }
 
 .outfit-preview-section {
-  flex: 1;
+  grid-area: preview;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000;
   position: relative;
-  min-height: 400px;
   container-type: size;
 
   /* The outfit viewer is a square filling the space, to at most 600px. */
@@ -369,18 +378,13 @@ body.wardrobe-v2 {
 }
 
 .outfit-controls-section {
-  width: 400px;
+  grid-area: controls;
   background: #fff;
   padding: 2rem;
   box-sizing: border-box;
   overflow-y: auto;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
 
-  @media (max-width: 800px) {
-    width: 100%;
-    max-height: 40vh;
-  }
-
   h1 {
     margin-top: 0;
     font-size: 1.75rem;