From 691e999a9dbf9c865ce6e31b520227d1deacda55 Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Wed, 24 Jun 2026 13:40:02 +0200 Subject: [PATCH] library: mobile polish for cover, toolbar, shelf, overview & share panel - Home/InteractiveCover: disable hotspots on mobile, fixed 448px cover band, center the "What is this place?" button 22px below the header - Header/UserProfile: stop the fixed header clipping the profile dropdown - LibraryToolbar + Library layout: connect the toolbar to the header, left-align toolbar actions on mobile - Shelf: two-row header on mobile, widen the shelf banner, advance one object per carousel arrow click - ObjectOverviewModal: stop grid rows stretching to fill the full-height body - ShareSelectionPanel: stack action buttons with 14px single-line labels on mobile Co-Authored-By: Claude Opus 4.7 --- src/components/Header/Header.module.scss | 6 +- .../UserProfile/UserProfile.module.scss | 6 +- .../InteractiveCover.module.scss | 20 +++++++ .../LibraryToolbar/LibraryToolbar.module.scss | 8 ++- .../ObjectOverviewModal.module.scss | 5 ++ .../ShareSelectionPanel.module.scss | 32 +++++++++++ .../library/organisms/Shelf/Shelf.module.scss | 55 +++++++++++++++++++ .../library/organisms/Shelf/Shelf.tsx | 15 ++++- src/layouts/library/Home/Home.module.scss | 9 ++- .../library/Library/Library.module.scss | 6 ++ 10 files changed, 153 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index cbdf833..7996e52 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -224,11 +224,13 @@ justify-content: center; z-index: 113; /* Desktop sets gap: 74px which pushes children past the viewport - on phones. Reset for mobile and clip any residual overflow. */ + on phones. Reset for mobile. Don't add overflow-x: hidden here — it + forces overflow-y to auto, turning the fixed header into a scroll + container that clips the user-profile dropdown (which opens below it). + The root already clips residual horizontal overflow. */ gap: 0; max-width: 100vw; max-width: 100dvw; - overflow-x: hidden; .actions { display: block; diff --git a/src/components/UserProfile/UserProfile.module.scss b/src/components/UserProfile/UserProfile.module.scss index 18e6e9c..050eb7c 100644 --- a/src/components/UserProfile/UserProfile.module.scss +++ b/src/components/UserProfile/UserProfile.module.scss @@ -26,7 +26,7 @@ .dropdown { position: absolute; top: calc(100% + 8px); - right: 24px; + right: 0; min-width: 180px; background-image: url('/keepsimple_/assets/user-dropdown/white-bg.png'); background-size: cover; @@ -36,6 +36,10 @@ z-index: 200; display: flex; flex-direction: column; + // The home hero