danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): improve bottom padding for safe area compatibility

Browse source 
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.
This commit is contained in:
Richard R 2026-05-30 15:35:02 -06:00
parent 60c1540744
commit 0448835892
8 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/(app)/epub/[id]/page.tsx
View file

@ -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>

2
src/app/(app)/html/[id]/page.tsx
View file

@ -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>

2
src/app/(app)/pdf/[id]/page.tsx
View file

@ -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>

6
src/app/layout.tsx
View file

@ -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",

2
src/components/CookieConsentBanner.tsx
View file

@ -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">

5
src/components/doclist/window/FinderSidebar.tsx
View file

@ -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>
)}

2
src/components/doclist/window/FinderStatusBar.tsx
View file

@ -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">

2
src/components/player/TTSPlayer.tsx
View file

@ -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}