From 2f06278c35746e5ca6fc2b0c8d46c5281d5eeca8 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 10:38:46 -0500 Subject: [PATCH 1/6] fix(ui): prevent popovers from overflowing viewport on small screens Co-Authored-By: Claude Opus 4.6 (1M context) --- .changeset/popover-viewport-overflow.md | 7 +++++++ packages/ui/src/components/ui/popover.tsx | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .changeset/popover-viewport-overflow.md diff --git a/.changeset/popover-viewport-overflow.md b/.changeset/popover-viewport-overflow.md new file mode 100644 index 00000000..2bcb0d66 --- /dev/null +++ b/.changeset/popover-viewport-overflow.md @@ -0,0 +1,7 @@ +--- +'@youversion/platform-core': patch +'@youversion/platform-react-hooks': patch +'@youversion/platform-react-ui': patch +--- + +fix(ui): prevent popovers from overflowing viewport on small screens diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx index 3c8085dd..d2fe8278 100644 --- a/packages/ui/src/components/ui/popover.tsx +++ b/packages/ui/src/components/ui/popover.tsx @@ -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-96 yv:sm:max-w-sm yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg', className, )} {...props} From ad151a38c0046ea1336af3001546905b28a8e430 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 11:00:11 -0500 Subject: [PATCH 2/6] Update bible reader font selection styles Adjusted styling for font selection buttons in the bible reader component to improve visual consistency and responsiveness. Also updated popover component to use a smaller default width on small screens. --- packages/ui/src/components/bible-reader.tsx | 13 +++++++------ packages/ui/src/components/ui/popover.tsx | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx index ba6b2b7e..6c1f348e 100644 --- a/packages/ui/src/components/bible-reader.tsx +++ b/packages/ui/src/components/bible-reader.tsx @@ -489,12 +489,13 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { A +
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx index d2fe8278..f7005dac 100644 --- a/packages/ui/src/components/ui/popover.tsx +++ b/packages/ui/src/components/ui/popover.tsx @@ -43,7 +43,7 @@ function PopoverContent({ 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:max-sm:max-w-[calc(100vw-2rem)] yv:w-96 yv:sm:max-w-sm 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} From 6c102b26e18ac6c395b73ce7c0545b98fafd5f80 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 13:18:09 -0500 Subject: [PATCH 3/6] Refactor bible reader toolbar layout and styling Adjusted the layout of the Bible reader toolbar to improve responsiveness and visual presentation. This includes changes to grid structures, max-width calculations, and element sizing for better adaptability across different screen sizes. --- packages/ui/src/components/bible-reader.tsx | 29 +++++++++++++++------ 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx index 6c1f348e..f80cbef8 100644 --- a/packages/ui/src/components/bible-reader.tsx +++ b/packages/ui/src/components/bible-reader.tsx @@ -351,13 +351,20 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { return (
-
- {!!yvContext?.authEnabled && } +
+ {yvContext?.authEnabled && } {({ chapterLabel, currentBook, loading }) => ( -
+
@@ -409,7 +422,7 @@ 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:group yv:place-self-center yv:size-9 yv:touch-hitbox" size="icon" variant="secondary" disabled={!canNavigateNext} From a6c21792213a9b49cce0dd99acc187882b035919 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 13:57:16 -0500 Subject: [PATCH 4/6] Update bible reader toolbar styling and variants Refactor the Bible reader toolbar to improve its visual appearance and responsiveness. This includes adjusting grid column definitions, button variants, and min-width properties for better text handling and overall layout. --- packages/ui/src/components/bible-reader.tsx | 28 +++++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx index f80cbef8..b1357ad4 100644 --- a/packages/ui/src/components/bible-reader.tsx +++ b/packages/ui/src/components/bible-reader.tsx @@ -377,13 +377,13 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { {({ chapterLabel, currentBook, loading }) => (
@@ -422,9 +426,9 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) { setChapter(nextResult.chapterId); } }} - className="yv:group yv:place-self-center yv:size-9 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" disabled={!canNavigateNext} aria-label="Next chapter" > @@ -445,7 +449,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
From 1945a2d0ce2762c4d5eb86fe71cefd609241f621 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 14:03:57 -0500 Subject: [PATCH 5/6] Fixed a test for the Bible font settings popover --- packages/ui/src/components/bible-reader.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx index 01b8892c..de054da5 100644 --- a/packages/ui/src/components/bible-reader.stories.tsx +++ b/packages/ui/src/components/bible-reader.stories.tsx @@ -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'); }, }; From 110793b1775c6b120e300d5808b56507721ddbc6 Mon Sep 17 00:00:00 2001 From: Cameron Pak Date: Thu, 2 Apr 2026 14:06:18 -0500 Subject: [PATCH 6/6] Update changeset message --- .changeset/popover-viewport-overflow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/popover-viewport-overflow.md b/.changeset/popover-viewport-overflow.md index 2bcb0d66..6120e640 100644 --- a/.changeset/popover-viewport-overflow.md +++ b/.changeset/popover-viewport-overflow.md @@ -4,4 +4,4 @@ '@youversion/platform-react-ui': patch --- -fix(ui): prevent popovers from overflowing viewport on small screens +Fixed some UI bugs that caused the Bible Reader toolbar and its popovers to overflow past the width of the screen on mobile.