spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

[Bug][Reader][UI] Reader slides under the fixed app menu-bar — its toolbar/close button is obscured #629

New Issue
Closed
opened 2026-07-17 03:37:35 +00:00 by spikerj · 1 comment
spikerj commented 2026-07-17 03:37:35 +00:00
Owner
Copy Link
Copy Source

Symptom

On /reader/:bookId, the top of the reader (its toolbar, including the close/back control) is hidden beneath the global app-menu-bar, which is position: fixed. You can't cleanly reach the reader's own close button.

Root cause

reader-shell.component.scss sets :host { height: 100vh } at top: 0 and never reserves the fixed header's strip. The rest of the app subtracts the shared --app-toolbar-height token (64px desktop / 56px mobile, auto-flipped at the 767px breakpoint) — e.g. video-call, space-game — but the reader shell didn't.

Fix

reader-shell :host: box-sizing: border-box; height: 100vh; padding-top: var(--app-toolbar-height, 64px); overflow: hidden — same proven pattern as video-call (ref issue #95). Covers both the EPUB and PDF readers (both render inside the shell).

Fix PR: spikersoft-angular (branch fix/reader-toolbar-header-offset).

## Symptom On `/reader/:bookId`, the top of the reader (its toolbar, including the **close/back** control) is hidden beneath the global `app-menu-bar`, which is `position: fixed`. You can't cleanly reach the reader's own close button. ## Root cause `reader-shell.component.scss` sets `:host { height: 100vh }` at `top: 0` and never reserves the fixed header's strip. The rest of the app subtracts the shared `--app-toolbar-height` token (64px desktop / 56px mobile, auto-flipped at the 767px breakpoint) — e.g. `video-call`, `space-game` — but the reader shell didn't. ## Fix `reader-shell` `:host`: `box-sizing: border-box; height: 100vh; padding-top: var(--app-toolbar-height, 64px); overflow: hidden` — same proven pattern as `video-call` (ref issue #95). Covers both the EPUB and PDF readers (both render inside the shell). Fix PR: spikersoft-angular (branch `fix/reader-toolbar-header-offset`).
spikerj commented 2026-07-17 04:00:55 +00:00
Author
Owner
Copy Link
Copy Source

Resolved in spikersoft-angular PR #219 (merged to master). The reader shell now reserves the fixed app-menu-bar strip (box-sizing: border-box + padding-top: var(--app-toolbar-height)), so the reader toolbar/close button clears the header on desktop and mobile. Closing.

Resolved in spikersoft-angular PR #219 (merged to `master`). The reader shell now reserves the fixed `app-menu-bar` strip (`box-sizing: border-box` + `padding-top: var(--app-toolbar-height)`), so the reader toolbar/close button clears the header on desktop and mobile. Closing.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#629