From 1c17922029f1673f0bfccf5453aad1a63232509c Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Tue, 29 Sep 2026 23:22:14 -0700
Subject: [PATCH] fix(web): phone width sidebar layering, workers filters, and
 composer placeholder (CL-9600)

---
 apps/web/src/app.css                |  3 +++
 apps/web/src/pages/workers-page.tsx | 12 ++++++++----
 apps/web/src/shell/shell-narrow.css |  9 ++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 05c2791da..fe9afa566 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -1979,6 +1979,9 @@ tr.insights-row-clickable:hover {
 }
 .chat-composer-input::placeholder {
   color: var(--ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .chat-composer-input:disabled {
   cursor: not-allowed;
diff --git a/apps/web/src/pages/workers-page.tsx b/apps/web/src/pages/workers-page.tsx
index f9533349e..6fb30171f 100644
--- a/apps/web/src/pages/workers-page.tsx
+++ b/apps/web/src/pages/workers-page.tsx
@@ -109,8 +109,12 @@ export function WorkersRosterList({
   );
   return (
     <div>
-      <div className="mb-3 flex items-center gap-3">
-        <div role="tablist" aria-label="Filter by status" className="bi-seg">
+      <div className="mb-3 flex flex-col items-stretch gap-3 min-[601px]:flex-row min-[601px]:items-center">
+        <div
+          role="tablist"
+          aria-label="Filter by status"
+          className="bi-seg max-w-full overflow-x-auto whitespace-nowrap [&_button]:shrink-0"
+        >
           {FILTERS.map(([key, label]) => (
             <button
               key={key}
@@ -127,13 +131,13 @@ export function WorkersRosterList({
             </button>
           ))}
         </div>
-        <span className="flex-1" />
+        <span className="hidden flex-1 min-[601px]:block" />
         <input
           value={query}
           onChange={(event) => setQuery(event.target.value)}
           placeholder="Filter workers"
           aria-label="Filter workers"
-          className="h-8 w-56 rounded-(--r-md) border border-(--line) bg-(--card) px-3 text-[13px]"
+          className="h-8 w-full min-[601px]:w-56 rounded-(--r-md) border border-(--line) bg-(--card) px-3 text-[13px]"
         />
       </div>
       <div className={`${ROW_GRID} hidden px-3 pb-2 text-[12px] font-bold text-(--ink-3) md:grid`}>
diff --git a/apps/web/src/shell/shell-narrow.css b/apps/web/src/shell/shell-narrow.css
index 5d72f5d7c..0ded502d7 100644
--- a/apps/web/src/shell/shell-narrow.css
+++ b/apps/web/src/shell/shell-narrow.css
@@ -18,8 +18,11 @@
   .shell-frame .shell-sidebar {
     position: fixed;
     inset: 0 auto 0 0;
-    z-index: 45;
+    z-index: 60;
     width: min(17.5rem, 85vw);
+    /* The desktop sidebar is transparent on the canvas; an overlay must be
+       opaque or the page beneath shows through it. */
+    background: var(--canvas);
     min-width: 0;
     box-shadow: var(--overlay);
     transition:
@@ -39,8 +42,8 @@
   .shell-sidebar-scrim {
     display: block;
     position: fixed;
-    inset: 0;
-    z-index: 44;
+    inset: -1px;
+    z-index: 59;
     background: rgb(0 0 0 / 24%);
     opacity: 0;
     pointer-events: none;