From f1b03647095d3799ebf991dbdb5b4bb890042c6d Mon Sep 17 00:00:00 2001
From: Kyleasmth <45497561+Kyleasmth@users.noreply.github.com>
Date: Fri, 20 Feb 2026 14:24:48 -0800
Subject: [PATCH 1/4] fix(ui): prevent BibleReader container from scrolling

---
 examples/nextjs/src/app/bible-reader/page.tsx | 2 +-
 packages/ui/src/components/bible-reader.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/nextjs/src/app/bible-reader/page.tsx b/examples/nextjs/src/app/bible-reader/page.tsx
index 84996436..28bf7330 100644
--- a/examples/nextjs/src/app/bible-reader/page.tsx
+++ b/examples/nextjs/src/app/bible-reader/page.tsx
@@ -4,7 +4,7 @@ import { BibleReader } from '@youversion/platform-react-ui';
 
 export default function BibleReaderPage(): React.ReactElement {
   return (
-    <div className="h-screen">
+    <div className="fixed inset-0">
       <BibleReader.Root defaultBook="JHN" defaultChapter="3" defaultVersionId={3034}>
         <BibleReader.Content />
         <BibleReader.Toolbar />
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 803ac2dc..0015a8ce 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -167,7 +167,7 @@ function Root({
       <div
         data-yv-sdk
         data-yv-theme={theme}
-        className="yv:flex yv:flex-col yv:h-full yv:bg-background yv:text-foreground"
+        className="yv:flex yv:flex-col yv:h-full yv:overflow-hidden yv:bg-background yv:text-foreground"
       >
         {children}
       </div>
@@ -196,7 +196,7 @@ function Content() {
   const usfmReference = `${book}.${chapter}`;
 
   return (
-    <main className="yv:*:max-w-lg yv:flex yv:flex-col yv:items-center yv:gap-6 yv:overflow-y-auto yv:px-6 yv:max-sm:px-4 yv:py-12 yv:h-full">
+    <main className="yv:*:max-w-lg yv:flex yv:flex-col yv:items-center yv:gap-6 yv:overflow-y-auto yv:px-6 yv:max-sm:px-4 yv:py-12 yv:flex-1 yv:min-h-0">
       <h1 className="yv:flex yv:gap-2 yv:flex-col yv:justify-center yv:items-center yv:font-serif yv:text-muted-foreground yv:font-medium">
         <span
           className={cn(

From 82bad71d1578ef016bcda5fe561371886f4c5e99 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 23 Feb 2026 15:17:49 -0600
Subject: [PATCH 2/4] feat: Adjust layout padding and height

Adds padding to the main element in several example pages and updates
the height of the Bible reader page to fill the viewport.
---
 examples/nextjs/src/app/bible-chapter/page.tsx | 4 ++--
 examples/nextjs/src/app/bible-reader/page.tsx  | 2 +-
 examples/nextjs/src/app/layout.tsx             | 2 +-
 examples/nextjs/src/app/page.tsx               | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/nextjs/src/app/bible-chapter/page.tsx b/examples/nextjs/src/app/bible-chapter/page.tsx
index 2ba98418..deb65107 100644
--- a/examples/nextjs/src/app/bible-chapter/page.tsx
+++ b/examples/nextjs/src/app/bible-chapter/page.tsx
@@ -4,8 +4,8 @@ import { BibleTextView } from '@youversion/platform-react-ui';
 
 export default function BibleChapter(): React.ReactElement {
   return (
-    <>
+    <main className="p-6">
       <BibleTextView reference="JHN.1" versionId={3034} />
-    </>
+    </main>
   );
 }
diff --git a/examples/nextjs/src/app/bible-reader/page.tsx b/examples/nextjs/src/app/bible-reader/page.tsx
index 28bf7330..9cf17df0 100644
--- a/examples/nextjs/src/app/bible-reader/page.tsx
+++ b/examples/nextjs/src/app/bible-reader/page.tsx
@@ -4,7 +4,7 @@ import { BibleReader } from '@youversion/platform-react-ui';
 
 export default function BibleReaderPage(): React.ReactElement {
   return (
-    <div className="fixed inset-0">
+    <div className="h-svh">
       <BibleReader.Root defaultBook="JHN" defaultChapter="3" defaultVersionId={3034}>
         <BibleReader.Content />
         <BibleReader.Toolbar />
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
index 758f5093..3ebc9882 100644
--- a/examples/nextjs/src/app/layout.tsx
+++ b/examples/nextjs/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
 
   return (
     <html lang="en">
-      <body className="w-full p-6">
+      <body className="w-full">
         <Providers redirectUri={redirectUri}>{children}</Providers>
       </body>
     </html>
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index d18e6030..0e727832 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home(): JSX.Element {
 
   if (auth.isLoading) {
     return (
-      <main className="w-full flex flex-col items-center justify-center min-h-screen gap-4">
+      <main className="p-6 w-full flex flex-col items-center justify-center min-h-screen gap-4">
         <div className="text-center">
           <h2 className="text-2xl font-bold mb-4">Loading...</h2>
         </div>
@@ -19,7 +19,7 @@ export default function Home(): JSX.Element {
   }
 
   return (
-    <main className="w-full flex flex-col items-start justify-start min-h-screen gap-4">
+    <main className="p-6 w-full flex flex-col items-start justify-start min-h-screen gap-4">
       <h1 className="text-4xl font-bold">YouVersion SDK Demo</h1>
       {auth.isAuthenticated ? <AuthenticatedView /> : <UnauthenticatedView />}
     </main>

From 9256a55dc20eef718748b68b84f8e316da616d75 Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 23 Feb 2026 15:19:19 -0600
Subject: [PATCH 3/4] fix(bible-reader): revert component height to full

---
 packages/ui/src/components/bible-reader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 0015a8ce..8837de70 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -196,7 +196,7 @@ function Content() {
   const usfmReference = `${book}.${chapter}`;
 
   return (
-    <main className="yv:*:max-w-lg yv:flex yv:flex-col yv:items-center yv:gap-6 yv:overflow-y-auto yv:px-6 yv:max-sm:px-4 yv:py-12 yv:flex-1 yv:min-h-0">
+    <main className="yv:*:max-w-lg yv:flex yv:flex-col yv:items-center yv:gap-6 yv:overflow-y-auto yv:px-6 yv:max-sm:px-4 yv:py-12 yv:h-full">
       <h1 className="yv:flex yv:gap-2 yv:flex-col yv:justify-center yv:items-center yv:font-serif yv:text-muted-foreground yv:font-medium">
         <span
           className={cn(

From 70f53a8a1379b04d8368d9289458597a585064cd Mon Sep 17 00:00:00 2001
From: Cameron Pak <cameronandrewpak@gmail.com>
Date: Mon, 23 Feb 2026 15:25:13 -0600
Subject: [PATCH 4/4] Fix: Remove overflow-hidden from bible reader root

The overflow-hidden class was unintentionally added to the bible reader
root container, causing unexpected clipping of content. This commit
removes that class.
---
 packages/ui/src/components/bible-reader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 8837de70..803ac2dc 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -167,7 +167,7 @@ function Root({
       <div
         data-yv-sdk
         data-yv-theme={theme}
-        className="yv:flex yv:flex-col yv:h-full yv:overflow-hidden yv:bg-background yv:text-foreground"
+        className="yv:flex yv:flex-col yv:h-full yv:bg-background yv:text-foreground"
       >
         {children}
       </div>