diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 756d42d..b390dd5 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -785,18 +785,31 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   }
   .rail button .glyph { display: none; }
   .rail button[aria-pressed="true"] { font-size: 13px; }
-  /* The cascade still runs left to right; the columns themselves scroll rather
-     than the page, so the stage keeps its width. */
+  /* The panel takes the phone's own shape: the columns stack into one scroll,
+     and inside each the chips run as a row again — the phone's chip strip is a
+     line of pills, never a ladder. What was a left-to-right cascade now reads
+     top to bottom, which is the same order the Android panel shows. */
   .chips {
     order: 1;
+    flex-direction: column;
     width: auto;
     max-width: none;
     max-height: 42vh;
+    overflow-x: hidden;
+    overflow-y: auto;
     border-right: none;
     border-bottom: 1px solid var(--border-soft);
   }
-  .col { width: 148px; padding: 8px; }
-  .col-slider { width: 200px; }
-  .col-create { width: 260px; }
+  .col {
+    width: auto;
+    padding: 8px;
+    gap: 6px;
+    overflow: visible;
+    border-right: none;
+  }
+  /* One chip per line is the desktop column's shape; a phone wants the row. */
+  .col .chip-row { flex-direction: row; align-items: center; }
+  .col .chip { text-align: center; }
+  .col-slider, .col-create { width: auto; }
   .stage { order: 0; flex: 1 1 auto; }
 }