From 6afb7d9fea013c96fcfd6003d1d878f9be43b1d4 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sun, 20 Sep 2026 06:24:27 +0700
Subject: [PATCH] web: the mobile rail wears Android's pills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a phone the studio's tabs are now the row the Android app draws: text
pills in uppercase mono, rounded full, amber and a step larger when open, no
glyph, scrolling sideways when the ten tabs outrun the screen.

Desktop keeps its icon-over-label column — the change lives in the <=860px
block, so nothing above that breakpoint moves.
---
 docker/frontend/src/styles/app.css | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css
index 23a4f09..756d42d 100644
--- a/docker/frontend/src/styles/app.css
+++ b/docker/frontend/src/styles/app.css
@@ -752,16 +752,39 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
   .header { position: relative; }
   .menu-wrap { position: static; }
   .popover { right: 8px; max-width: calc(100vw - 16px); }
+  /* The rail takes the shape the Android app gives it: one scrolling row of
+     text pills, no glyph, uppercase mono, the open tab amber and a step larger.
+     Android's own rail is exactly this (src/components/ToolRail.tsx). */
   .rail {
     order: 2;
     width: auto;
     flex-direction: row;
+    align-items: center;
+    gap: 8px;
     border-right: none;
     border-top: 1px solid var(--border-soft);
     overflow-x: auto;
-    padding: 4px;
+    overflow-y: hidden;
+    padding: 6px 8px;
+    scrollbar-width: none;
   }
-  .rail button { flex: 1 0 auto; min-width: 62px; }
+  .rail::-webkit-scrollbar { display: none; }
+  .rail button {
+    flex: 0 0 auto;
+    flex-direction: row;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--bg-sunken);
+    padding: 8px 12px;
+    font-family: var(--mono);
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+  .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. */
   .chips {