YPE-1919: Fix overflow issues on mobile for Bible Reader toolbar and Popovers

[cameronapak]

Watch Video Overview

Made popovers fit within the mobile view and not overflow off the screen. Affects all popovers: Reader Settings, Bible Version Picker, Bible Chapter Picker, User Menu.

Fixes overflow issues on small screens for when the user has a really long Bible book name or long Bible Version name. See video for more details.

Completes YPE-1919

[changeset-bot]

🦋 Changeset detected

Latest commit: 110793b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch
@youversion/platform-react-ui	Patch
vite-react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[greptile-apps]

Greptile Summary

This PR fixes mobile horizontal overflow for the BibleReader toolbar and all popovers (Bible Version Picker, Chapter Picker, Reader Settings, User Menu) by switching the toolbar to a CSS grid layout with a responsive max-w-[calc(100vw-2rem)] cap, splitting long book/version labels into truncatable <span>s, and adding Radix collisionPadding={16} plus a matching max-sm:max-w-[calc(100vw-2rem)] class on PopoverContent. The bg-black hardcoded color is also replaced with the semantic bg-primary token, with test assertions updated to match.

Confidence Score: 5/5

Safe to merge; all findings are P2 style suggestions with no functional regressions.

The overflow fix uses well-established Radix collision-padding and standard Tailwind responsive utilities, the semantic token rename is consistent throughout including tests, and the unified changeset is correctly structured. The only finding is a minor sizing inconsistency between the prev/next chapter buttons that has no crash risk.

No files require special attention.

Important Files Changed

Filename	Overview
packages/ui/src/components/ui/popover.tsx	Adds Radix collisionPadding={16} for built-in viewport avoidance and replaces fixed-width classes with a responsive max-sm:max-w-[calc(100vw-2rem)] cap; no issues found.
packages/ui/src/components/bible-reader.tsx	Toolbar refactored from flex to grid layout with mobile-safe max-width; book/chapter label split into truncatable spans; prev/next nav buttons changed from absolute-positioned to grid-tracked; semantic bg-primary replaces hardcoded bg-black.
packages/ui/src/components/bible-reader.stories.tsx	Test assertions updated from yv:bg-black to yv:bg-primary to match the renamed active-button class; straightforward sync with the component change.
.changeset/popover-viewport-overflow.md	Patch changeset correctly bumps all three packages together, satisfying the unified-versioning requirement.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Screen width] --> B{Breakpoint check}
    B -- "less than sm 640px" --> C[Toolbar: max-w calc 100vw minus 2rem]
    B -- "sm or wider" --> D[Toolbar: max-w-lg 512px]

    C --> E[Popover: max-w calc 100vw minus 2rem]
    D --> F[Popover: w-sm 384px max-w-sm]

    E --> G[Radix collisionPadding 16px auto-repositions near edges]
    F --> G

    G --> H[No horizontal overflow on mobile]

Loading

_{Reviews (4): Last reviewed commit: "Update changeset message" | Re-trigger Greptile}

[cameronapak]

Hey Jared, I'd like to request a review from you on this. I've created a brief overview video that should help get you up to speed

[cameronapak]

note: this is intentional since the parent bg of this grouped button is the button color

[cameronapak]

note: this is intentional since the parent bg of this grouped button is the button color