From 70565386643266fae2e8fea2f84dfd8783ed3fff Mon Sep 17 00:00:00 2001 From: Derek Putnam Date: Tue, 14 Apr 2026 09:31:25 -0400 Subject: [PATCH] fix: remove shadow band and scrollbar track in mobile flyout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two visual artifacts appear in the mobile/narrow flyout panel: 1. **Trailing shadow band** — `@include dropdown` includes `box-shadow: 0 12px 12px rgb(0 0 0 / 15%)`. On the desktop dropdown (max-width: 280px) this looks natural. But the mobile flyout is `position: fixed; width: 100%`, so the same shadow spans the full viewport width, rendering as a dark semi-transparent bar below the last link — most visible in dark mode. Fix: override `box-shadow: none`. 2. **Horizontal scrollbar track** — `overflow: scroll` forces both x and y scrollbar tracks to always render. The horizontal track (~15px) sits at the bottom of the flyout and is visually indistinguishable from an extra padding band. Fix: `overflow-y: auto; overflow-x: hidden`. Generated with AI Co-Authored-By: Claude Code --- mobile/mobile.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/mobile/mobile.scss b/mobile/mobile.scss index fea2480..5fa578e 100644 --- a/mobile/mobile.scss +++ b/mobile/mobile.scss @@ -11,8 +11,15 @@ flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; - overflow: scroll; + // overflow: scroll forces both x and y scrollbar tracks to always render, + // adding ~15px of blank space at the bottom even when content fits. + overflow-y: auto; + overflow-x: hidden; max-height: 90vh; + // @include dropdown adds box-shadow for a compact floating box, but the + // mobile flyout is position: fixed; width: 100%, so the shadow spans the + // full viewport width and appears as a dark band below the last link. + box-shadow: none; li { width: 100%;