From 12f129eae1953d98474b1257091ac6eba553242c Mon Sep 17 00:00:00 2001
From: pythonlearner1025 <mjsong2021@gmail.com>
Date: Sat, 29 Aug 2026 19:12:21 +0000
Subject: [PATCH] =?UTF-8?q?fix(webapp):=20strip=20round=20three=20?=
 =?UTF-8?q?=E2=80=94=20selection=20bar,=20avatar=20fill,=201.6x=20tiles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The active tile loses its box-shadow ring (it read as a ghost box
behind a pastel tile) for a Discord-style bar at the strip's edge. The
avatar photo becomes an absolute fill so grid track sizing can never
squeeze it into an oval; the stored Google URL was verified square
(=s96-c) against the live D1. Tiles grow 22px -> 35px per request.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/webapp/src/strip-rail.css | 33 +++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/strip-rail.css b/packages/webapp/src/strip-rail.css
index ee2aa95b..6cd5f847 100644
--- a/packages/webapp/src/strip-rail.css
+++ b/packages/webapp/src/strip-rail.css
@@ -78,15 +78,15 @@
   display: grid;
   /* Same footprint as the org mark at the top of the strip (user ruling
      2026-08-29). */
-  width: 22px;
-  height: 22px;
+  width: 35px;
+  height: 35px;
   flex: none;
   place-items: center;
   border: 0;
-  border-radius: 6px;
+  border-radius: 10px;
   color: var(--muted);
   background: var(--hover);
-  font: 700 9px/1 var(--font-ui);
+  font: 700 13px/1 var(--font-ui);
   cursor: pointer;
 }
 
@@ -97,10 +97,19 @@
   outline-offset: 1px;
 }
 
-.shell-wtile--on {
-  color: var(--ink);
-  background: color-mix(in oklab, var(--accent) 34%, var(--paper));
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, var(--paper));
+/* Selection is the bar at the strip's edge, never a ring: a ring behind a
+   pastel tile reads as a ghost box (user ruling 2026-08-29). */
+.shell-wtile--on { color: var(--ink); }
+.shell-wtile--on::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -7px;
+  width: 3px;
+  height: 70%;
+  border-radius: 0 3px 3px 0;
+  background: var(--ink);
+  transform: translateY(-50%);
 }
 
 .shell-wtile--off {
@@ -116,7 +125,7 @@
 
 .shell-wtile:disabled { cursor: default; }
 
-.shell-wtile__plus { width: 11px; height: 11px; }
+.shell-wtile__plus { width: 14px; height: 14px; }
 
 .shell-strip__spacer { flex: 1 1 auto; }
 
@@ -140,6 +149,7 @@
 .shell-strip__account { position: relative; flex: none; }
 
 .shell-av {
+  position: relative;
   display: grid;
   overflow: hidden;
   width: 24px;
@@ -154,7 +164,10 @@
   cursor: pointer;
 }
 
-.shell-av__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+/* Absolute fill: percentage sizing of a grid child against an auto track can
+   collapse to the image's intrinsic box, which turned a square photo into a
+   tall oval. inset: 0 against the button's padding box cannot. */
+.shell-av__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 
 /* The org popover reuses the shell's menu skin; only the anchor changes,
    because the strip is 48px wide and it opens beside it. */