Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cameronapak wants to merge 6 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2f06278
fix(ui): prevent popovers from overflowing viewport on small screens
cameronapak Apr 2, 2026
ad151a3
Update bible reader font selection styles
cameronapak Apr 2, 2026
6c102b2
Refactor bible reader toolbar layout and styling
cameronapak Apr 2, 2026
a6c2179
Update bible reader toolbar styling and variants
cameronapak Apr 2, 2026
1945a2d
Fixed a test for the Bible font settings popover
cameronapak Apr 2, 2026
110793b
Update changeset message
cameronapak Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/popover-viewport-overflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@youversion/platform-core': patch
'@youversion/platform-react-hooks': patch
'@youversion/platform-react-ui': patch
---

Fixed some UI bugs that caused the Bible Reader toolbar and its popovers to overflow past the width of the screen on mobile.
4 changes: 2 additions & 2 deletions packages/ui/src/components/bible-reader.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,10 +541,10 @@ export const LoadsSavedPreferencesFromLocalStorage: Story = {
});

const sourceSerifButton = screen.getByRole('button', { name: /source serif/i });
await expect(sourceSerifButton).toHaveClass('yv:bg-black');
await expect(sourceSerifButton).toHaveClass('yv:bg-primary');

const interButton = screen.getByRole('button', { name: /inter/i });
await expect(interButton).not.toHaveClass('yv:bg-black');
await expect(interButton).not.toHaveClass('yv:bg-primary');
},
};

Expand Down
56 changes: 38 additions & 18 deletions packages/ui/src/components/bible-reader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,13 +351,20 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
return (
<section
className={cn(
'yv:flex yv:justify-center yv:gap-2 yv:p-4 yv:bg-background yv:border-border',
'yv:flex yv:justify-center yv:gap-2 yv:p-4 yv:bg-background yv:border-border yv:max-w-screen yv:overflow-x-hidden',
border === 'top' && 'yv:border-t',
border === 'bottom' && 'yv:border-b',
)}
>
<div className={cn('yv:flex yv:grow yv:w-full yv:items-center yv:max-w-lg yv:gap-3')}>
{!!yvContext?.authEnabled && <UserMenu />}
<div
className={cn(
'yv:grid yv:w-full yv:items-center yv:sm:max-w-lg yv:max-w-[calc(100vw-2rem)] yv:gap-3',
yvContext?.authEnabled
? 'yv:grid-cols-[auto_1fr_auto_auto]'
: 'yv:grid-cols-[1fr_auto_auto]',
)}
>
{yvContext?.authEnabled && <UserMenu />}

<BibleChapterPicker.Root
book={book}
Expand All @@ -369,11 +376,14 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
>
<BibleChapterPicker.Trigger>
{({ chapterLabel, currentBook, loading }) => (
<div className="yv:relative yv:grow">
<div
className="yv:grid yv:grid-cols-[auto_1fr_auto]
yv:justify-start yv:grid-rows-1 yv:overflow-hidden yv:rounded-full yv:min-w-30 yv:bg-muted yv:text-muted-foreground yv:hover:bg-muted/80"
>
<Button
className="yv:group yv:absolute yv:place-self-center yv:top-0 yv:bottom-0 yv:left-4 yv:z-10 yv:size-6! yv:-translate-x-2 yv:touch-hitbox"
className="yv:min-w-0 yv:group yv:place-self-center yv:max-size-9 yv:touch-hitbox"
size="icon"
variant="secondary"
variant="ghost"
Comment on lines -376 to +386
Copy link
Copy Markdown
Collaborator Author

@cameronapak cameronapak Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

disabled={!canNavigatePrevious}
aria-label="Previous chapter"
onClick={(e) => {
Expand All @@ -390,14 +400,21 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
<Button
size="lg"
variant="secondary"
className="yv:w-full yv:font-bold yv:text-foreground yv:tabular-nums"
className="yv:px-0 yv:font-bold yv:text-foreground yv:min-w-[5ch]"
disabled={loading}
aria-label="Change Bible book and chapter"
>
{loading ? (
<LoaderIcon className="yv:size-4 yv:animate-spin yv:text-muted-foreground" />
) : (
`${currentBook?.title || 'Select'} ${chapterLabel || ''}`
<>
<span className="yv:min-w-[3ch] yv:truncate">
{currentBook?.title || 'Select'}
</span>
<span className="yv:tabular-nums yv:min-w-[1ch] yv:truncate">
{chapterLabel || ''}
</span>
</>
)}
</Button>

Expand All @@ -409,9 +426,9 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
setChapter(nextResult.chapterId);
}
}}
className="yv:group yv:absolute yv:place-self-center yv:top-0 yv:bottom-0 yv:right-4 yv:z-10 yv:size-6! yv:translate-x-2 yv:touch-hitbox"
className="yv:min-w-0 yv:group yv:place-self-center yv:size-9 yv:touch-hitbox"
size="icon"
variant="secondary"
variant="ghost"
Comment on lines -414 to +431
Copy link
Copy Markdown
Collaborator Author

@cameronapak cameronapak Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

disabled={!canNavigateNext}
aria-label="Next chapter"
>
Expand All @@ -432,7 +449,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
<Button
size="lg"
variant="secondary"
className="yv:font-bold yv:text-foreground"
className="yv:min-w-[calc(0.25rem*4*2+3ch)] yv:px-4 yv:font-bold yv:text-foreground"
disabled={loading}
aria-label={loading ? 'Loading Bible version' : 'Change Bible version'}
>
Expand All @@ -441,7 +458,9 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
{loading ? (
<LoaderIcon className="yv:size-4 yv:animate-spin yv:text-muted-foreground" />
) : (
version?.localized_abbreviation || 'Select version'
<span className="yv:truncate">
{version?.localized_abbreviation || 'Select version'}
</span>
)}
</div>
</Button>
Expand Down Expand Up @@ -489,12 +508,13 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
A
</Button>
</div>

<div className="yv:grid yv:grid-cols-2">
<Button
className={cn(
'yv:group yv:dark:bg-muted yv:rounded-r-none yv:dark:border-border yv:rounded-l-[8px] yv:h-auto',
'yv:group yv:dark:bg-muted yv:rounded-r-none yv:border-r-0.5 yv:dark:border-border yv:rounded-l-[8px] yv:h-auto',
currentFontFamily === INTER_FONT
? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
? 'yv:bg-primary yv:border-primary yv:dark:bg-inherit yv:text-primary-foreground yv:hover:text-primary-foreground yv:hover:bg-primary/80'
: '',
)}
onClick={() => setCurrentFontFamily(INTER_FONT)}
Expand All @@ -511,14 +531,14 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
>
Font
</span>
<span className="yv:text-xl">Inter</span>
<span className="yv:sm:text-xl yv:text-base">Inter</span>
</div>
</Button>
<Button
className={cn(
'yv:group yv:dark:bg-muted yv:rounded-l-none yv:rounded-r-[8px] yv:h-auto',
'yv:group yv:dark:bg-muted yv:border-l-0.5 yv:rounded-l-none yv:rounded-r-[8px] yv:h-auto',
currentFontFamily === SOURCE_SERIF_FONT
? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
? 'yv:bg-primary yv:border-primary yv:dark:bg-inherit yv:text-primary-foreground yv:hover:text-primary-foreground yv:hover:bg-primary/80'
: '',
)}
onClick={() => setCurrentFontFamily(SOURCE_SERIF_FONT)}
Expand All @@ -535,7 +555,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
>
Font
</span>
<span className="yv:text-xl yv:font-serif">Source Serif</span>
<span className="yv:sm:text-xl yv:text-base yv:font-serif">Source Serif</span>
</div>
</Button>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/ui/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@ function PopoverContent({
data-yv-theme={theme}
align={align}
sideOffset={sideOffset}
collisionPadding={16}
className={cn(
'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:origin-(--radix-popover-content-transform-origin) yv:outline-hidden yv:grid yv:grid-rows-[auto_1fr_auto] yv:p-0 yv:h-full yv:max-h-[66svh] yv:w-96 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg',
'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:origin-(--radix-popover-content-transform-origin) yv:outline-hidden yv:grid yv:grid-rows-[auto_1fr_auto] yv:p-0 yv:h-full yv:max-h-[66svh] yv:max-sm:max-w-[calc(100vw-2rem)] yv:w-sm yv:sm:max-w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg',
className,
)}
{...props}
Expand Down
Loading