From 11617c186052fa3240780dae2129c569ddb933fe Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Wed, 5 Aug 2026 15:31:40 -0400 Subject: [PATCH] fix(reader): tighten mobile header/footer and add safe-area margins The reader chrome used the same dimensions at every screen size, and the book viewport offset was hardcoded to 52px. This made the header/footer oversized on phones and left the body text flush against (or overlapping) the bars, with no handling for notched-device safe areas. - Add viewport-fit=cover so notched devices expose safe-area insets. - Shrink the top bar on mobile (px-3 py-2 / text-base, scaling up at sm:) and hide the chapter title on phones (hidden sm:block sm:truncate). - Shrink the bottom bar on mobile (tighter padding/gap, p-1.5 sm:p-2 on buttons) while keeping all controls visible. - Replace the hardcoded top-[52px] bottom-[52px] viewport offsets with responsive calc() values (44/48px mobile, 60px at sm:) that fold in env(safe-area-inset-*), plus matching safe-area padding on the bars, so the book content always clears the chrome with a visible margin. Regenerates reader_templ.go and rebuilds style.css. --- templates/reader.templ | 36 ++++++++++++++++++------------------ templates/reader_templ.go | 14 +++++++------- web/static/style.css | 2 +- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/templates/reader.templ b/templates/reader.templ index b94d04f..9a87196 100644 --- a/templates/reader.templ +++ b/templates/reader.templ @@ -36,7 +36,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm - + { metadata.Title } - Bookhoard Reader @@ -71,7 +71,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm -
+
@DictionaryPopup() @@ -82,25 +82,25 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) {
-
-
- +
+
+ ← Back -

{ metadata.Title }

+

{ metadata.Title }

-
-
+
+
-