From dd5760c4366f14f7e4ed2afd1a04363bd8d99533 Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Sun, 2 Aug 2026 18:48:34 +0200 Subject: [PATCH] [style](trx-frontend-http): fade the scrolled tab strip edge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The page tabs scroll rather than wrap, so the last visible tab was sliced mid-word ("Se…" for Settings), which reads as a rendering fault instead of as an invitation to scroll. Fade the trailing edge with a mask. A colour-matched cover gradient is the usual trick, but the card is transparent, so a cover would have to track the page background across both themes and all nine styles; a mask is colour-agnostic. Only the trailing edge is faded, leaving the first tab crisp while the strip sits at rest. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz Signed-off-by: Stan Grams --- .../trx-frontend/trx-frontend-http/assets/web/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index 813976ba..24c14e4f 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1549,6 +1549,15 @@ small { color: var(--text-muted); } overflow-x: auto; scrollbar-width: thin; } +/* Fade the trailing edge so a tab scrolled out of view reads as "there is more" + * rather than as a label cut mid-word. A mask rather than a colour-matched + * cover gradient: the card is transparent, so a cover would have to track the + * page background across both themes and all nine styles. Only the trailing + * edge is faded, so the first tab stays crisp when the strip is at rest. */ +.tab-bar-nav { + -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%); + mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%); +} .tab-bar-nav::-webkit-scrollbar { height: 3px; } .tab-bar-nav::-webkit-scrollbar-thumb { border-radius: 3px;