fix(ui): prevent BibleReader container from scrolling YPE-1351

[Kyleasmth]

For testing: Open the BibleReader and confirm there is only 1 scrollbar and the bottom reader bar doesn't move when using the scroll wheel with the cursor over it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f1b0364

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[greptile-apps]

Greptile Summary

Fixed double scrollbar issue in BibleReader by applying proper flexbox constraints. The root container now uses overflow-hidden to prevent scrolling at that level, while the Content component uses flex-1 min-h-0 instead of h-full to properly participate in flexbox layout and allow only the content area to scroll.

• Added overflow-hidden to BibleReader.Root to prevent container-level scrolling
• Changed BibleReader.Content from h-full to flex-1 min-h-0 to enable proper flex shrinking
• Updated example page container to use fixed inset-0 for consistent viewport filling

The min-h-0 is essential for flexbox to allow the content to shrink below its natural content height, which is necessary for the scrollable area to work correctly.

Confidence Score: 5/5

• This PR is safe to merge - it applies standard CSS flexbox patterns to fix a UI bug
• The changes use well-established flexbox patterns (overflow-hidden on parent, flex-1 min-h-0 on scrollable child) to fix the double scrollbar issue. The implementation is minimal, focused, and follows CSS best practices for creating scrollable flex containers.
• No files require special attention

Important Files Changed

Filename	Overview
examples/nextjs/src/app/bible-reader/page.tsx	Changed container from h-screen to fixed inset-0 to ensure the BibleReader fills the viewport correctly
packages/ui/src/components/bible-reader.tsx	Added overflow-hidden to root and changed Content to use flex-1 min-h-0 instead of h-full to fix scrolling behavior

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Container: fixed inset-0] --> B[Root: flex flex-col h-full overflow-hidden]
    B --> C[Content: flex-1 min-h-0 overflow-y-auto]
    B --> D[Toolbar: fixed height]
    C --> E[Bible Text View scrolls]
    D --> F[Bottom bar stays fixed]
    
    style A fill:#e1f5ff
    style B fill:#fff4e6
    style C fill:#e7f5e7
    style D fill:#fff4e6
    style E fill:#f0f0f0
    style F fill:#f0f0f0

Loading

_{Last reviewed commit: f1b0364}

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}