diff --git a/apps/readest-app/src/app/layout.tsx b/apps/readest-app/src/app/layout.tsx
index f14ccf6d..f83fdbc8 100644
--- a/apps/readest-app/src/app/layout.tsx
+++ b/apps/readest-app/src/app/layout.tsx
@@ -67,6 +67,15 @@ export const viewport: Viewport = {
maximumScale: 1,
userScalable: false,
viewportFit: 'cover',
+ // Make Android Chrome's layout viewport shrink when the on-screen
+ // keyboard opens (matches iOS behavior). Without this, Android's
+ // default `interactive-widget=resizes-visual` keeps the layout
+ // viewport at full screen height while only the visual viewport
+ // shrinks — causing fixed `inset-0`-centered modals (passphrase
+ // prompt, group picker, etc.) to render under the keyboard. With
+ // `resizes-content`, `100vh` / flex centering naturally targets
+ // the available space above the keyboard.
+ interactiveWidget: 'resizes-content',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/apps/readest-app/src/pages/_app.tsx b/apps/readest-app/src/pages/_app.tsx
index 50205794..8c707fc5 100644
--- a/apps/readest-app/src/pages/_app.tsx
+++ b/apps/readest-app/src/pages/_app.tsx
@@ -9,9 +9,16 @@ function MyApp({ Component, pageProps }: AppProps) {
return (
<>
+ {/*
+ * `interactive-widget=resizes-content` makes Android Chrome
+ * shrink the layout viewport when the on-screen keyboard
+ * opens (matches iOS default behavior). Without it, the
+ * layout viewport stays full-height and `fixed inset-0`-
+ * centered modals render under the keyboard.
+ */}