From 51198244b8990a1e43b8952fc0a0dad9a4495d87 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 11 Jul 2026 14:11:32 +0000 Subject: [PATCH] fix(mobile): restore the scroll-row trailing fade dropped by the CSS compiler MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The horizontal fade on .answer-suggestion-row-scroll (prescribing checks, differentials recent work, etc.) vanished on phones: the source declared an unconditional mask-image plus a min-width:640px reset to none, but Lightning CSS collapsed the base rule — whose only media override was the mask — and dropped the gradient from the compiled output entirely. The near-identical .answer-suggestion-chips-scroll survived only because its override also changes other properties, so the compiler kept the rules distinct. Scope the fade to a single max-width:639px block instead, leaving no base rule for the compiler to merge away. Behavior is unchanged: gradient below 640px, none from sm up. Restores the two ui-tools "Responsive layout guards" mobile scroll-row tests. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_013mCpzKWTCtBSLC6p1NsSWo --- src/app/globals.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 031708539..9c06a4ddb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1075,8 +1075,19 @@ summary::-webkit-details-marker { .answer-suggestion-row-scroll { min-width: 0; scrollbar-width: none; - mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent); - -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent); +} + +/* Mobile-only trailing fade. Scoped to a max-width query (rather than an + unconditional mask plus a min-width:640px reset) because Lightning CSS + collapses a base rule whose only media override is the mask, dropping the + gradient entirely — the sibling .answer-suggestion-chips-scroll survives only + because its override also changes other properties. A single mobile-scoped + rule leaves nothing for the compiler to merge away. */ +@media (max-width: 639px) { + .answer-suggestion-row-scroll { + mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent); + -webkit-mask-image: linear-gradient(90deg, black calc(100% - 1rem), transparent); + } } .answer-suggestion-row-scroll::-webkit-scrollbar { @@ -1360,11 +1371,6 @@ summary::-webkit-details-marker { font-size: 0.8125rem; } - .answer-suggestion-row-scroll { - mask-image: none; - -webkit-mask-image: none; - } - .document-mobile-search-edge { left: auto; right: auto;