From efe578f61ce12ff0cdf74e2fab4db50824c056ae Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sun, 20 Sep 2026 07:00:55 +0700
Subject: [PATCH] web: the mobile chip strip lies down
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tapping a tab on a phone opened a 148px column with the chips stacked one per
line, so the strip read as a ladder down the side of the photo. Android's own
panel runs its chips as a row — see src/components/AdjustmentPanel.tsx — and
that is what the phone now gets: the columns stack into one vertical scroll
and each chip row runs sideways again, wrapping inside the full width.

Desktop and tablet keep the columns and the stacked chips; the change lives in
the <=860px block.
---
 docker/frontend/src/styles/app.css | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

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; }
 }