From 0448835892753378d4fd381d3513388deaa34b24 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Sat, 30 May 2026 15:35:02 -0600
Subject: [PATCH] style(ui): improve bottom padding for safe area compatibility

update bottom padding on banners, status bars, and player controls to use
env(safe-area-inset-bottom) for better support on devices with display
cutouts or home indicators. also add viewportFit: cover to layout for
full-viewport rendering on mobile browsers.
---
 src/app/(app)/epub/[id]/page.tsx                  | 2 +-
 src/app/(app)/html/[id]/page.tsx                  | 2 +-
 src/app/(app)/pdf/[id]/page.tsx                   | 2 +-
 src/app/layout.tsx                                | 6 +++++-
 src/components/CookieConsentBanner.tsx            | 2 +-
 src/components/doclist/window/FinderSidebar.tsx   | 5 ++++-
 src/components/doclist/window/FinderStatusBar.tsx | 2 +-
 src/components/player/TTSPlayer.tsx               | 2 +-
 8 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/epub/[id]/page.tsx b/src/app/(app)/epub/[id]/page.tsx
index 57f4c0b..19e1806 100644
--- a/src/app/(app)/epub/[id]/page.tsx
+++ b/src/app/(app)/epub/[id]/page.tsx
@@ -243,7 +243,7 @@ export default function EPUBPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>
diff --git a/src/app/(app)/html/[id]/page.tsx b/src/app/(app)/html/[id]/page.tsx
index 21ad5c6..90fa49a 100644
--- a/src/app/(app)/html/[id]/page.tsx
+++ b/src/app/(app)/html/[id]/page.tsx
@@ -234,7 +234,7 @@ export default function HTMLPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>
diff --git a/src/app/(app)/pdf/[id]/page.tsx b/src/app/(app)/pdf/[id]/page.tsx
index 7695b4b..7635833 100644
--- a/src/app/(app)/pdf/[id]/page.tsx
+++ b/src/app/(app)/pdf/[id]/page.tsx
@@ -441,7 +441,7 @@ export default function PDFViewerPage() {
       )}
       {isAtLimit ? (
         <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-          <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+          <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
             <RateLimitPauseButton />
             <RateLimitBanner />
           </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1315dbe..e2dcdad 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 import { ReactNode } from "react";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import { Figtree } from "next/font/google";
 import { ConsentAwareAnalytics } from "@/components/ConsentAwareAnalytics";
 import { CookieConsentBanner } from "@/components/CookieConsentBanner";
@@ -30,6 +30,10 @@ const themeInitScript = `
 })();
 `;
 
+export const viewport: Viewport = {
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   title: {
     default: "OpenReader",
diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx
index c2c4608..97e5126 100644
--- a/src/components/CookieConsentBanner.tsx
+++ b/src/components/CookieConsentBanner.tsx
@@ -41,7 +41,7 @@ export function CookieConsentBanner() {
       leave="transition ease-in duration-200 transform"
       leaveFrom="translate-y-0 opacity-100"
       leaveTo="translate-y-full opacity-0"
-      className="fixed bottom-0 left-0 right-0 z-[60] p-4 md:p-6"
+      className="fixed bottom-0 left-0 right-0 z-[60] px-4 pt-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-6 md:pt-6 md:pb-[max(1.5rem,env(safe-area-inset-bottom))]"
     >
       <div className="mx-auto max-w-5xl rounded-xl border border-offbase bg-base p-5 shadow-2xl md:flex md:items-center md:justify-between md:gap-8">
         <div className="mb-4 md:mb-0">
diff --git a/src/components/doclist/window/FinderSidebar.tsx b/src/components/doclist/window/FinderSidebar.tsx
index d6216cb..0ecf12c 100644
--- a/src/components/doclist/window/FinderSidebar.tsx
+++ b/src/components/doclist/window/FinderSidebar.tsx
@@ -354,7 +354,10 @@ export function FinderSidebar({
         </div>
       </div>
       {bottomSlot && (
-        <div className="shrink-0 border-t border-offbase p-2" onClick={(e) => e.stopPropagation()}>
+        <div
+          className="shrink-0 border-t border-offbase px-2 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:pb-2"
+          onClick={(e) => e.stopPropagation()}
+        >
           {bottomSlot}
         </div>
       )}
diff --git a/src/components/doclist/window/FinderStatusBar.tsx b/src/components/doclist/window/FinderStatusBar.tsx
index e8c74de..acbd573 100644
--- a/src/components/doclist/window/FinderStatusBar.tsx
+++ b/src/components/doclist/window/FinderStatusBar.tsx
@@ -19,7 +19,7 @@ export function FinderStatusBar({
     <div
       role="status"
       aria-live="polite"
-      className="h-6 px-3 flex items-center justify-between gap-3 text-[11px] text-muted bg-base border-t border-offbase select-none"
+      className="min-h-6 px-3 pb-[env(safe-area-inset-bottom)] flex items-center justify-between gap-3 text-[11px] text-muted bg-base border-t border-offbase select-none"
     >
       <span className="truncate">{summary}</span>
       <span className="shrink-0">
diff --git a/src/components/player/TTSPlayer.tsx b/src/components/player/TTSPlayer.tsx
index c38dc23..2689747 100644
--- a/src/components/player/TTSPlayer.tsx
+++ b/src/components/player/TTSPlayer.tsx
@@ -32,7 +32,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
 
   return (
     <div className="sticky bottom-0 z-30 w-full border-t border-offbase bg-base" data-app-ttsbar>
-      <div className="px-2 md:px-3 pt-1 pb-1.5 flex items-center justify-center gap-1 min-h-10">
+      <div className="px-2 md:px-3 pt-1 pb-[max(0.375rem,env(safe-area-inset-bottom))] flex items-center justify-center gap-1 min-h-10">
         {/* Speed control */}
         <SpeedControl 
           setSpeedAndRestart={setSpeedAndRestart}