From ee29f55c5dfbed2d40146bfa7f0a5de032d9ce3a Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 27 Mar 2026 17:19:10 +0000
Subject: [PATCH] [#300] Fix clipped bottom UI in miniapp environments

Add viewport-fit=cover to enable safe-area insets in miniapps.
Add env(safe-area-inset-bottom) padding to Reading Mode bottom nav
and MobileActionBar bottom sheet panel. MobileActionBar fixed bar
already had safe-area padding. Regular browser/desktop unaffected
(safe-area-inset-bottom resolves to 0).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/layout.tsx                 | 8 +++++++-
 src/components/MobileActionBar.tsx | 2 +-
 src/components/ReadingMode.tsx     | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 94a12276..5860a8bf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Lora, Inter, Geist_Mono } from "next/font/google";
 import { Providers } from "./providers";
 import { NavBar } from "../components/NavBar";
@@ -29,6 +29,12 @@ const appDescription =
   "Tokenise your story from day 1. Publish plots, drive trading, earn royalties from every trade — powered by the market, not a platform.";
 const themeColor = "#E8DFD0";
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   metadataBase: new URL(appUrl),
   title: appName,
diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
index d58fd69b..a32c16ad 100644
--- a/src/components/MobileActionBar.tsx
+++ b/src/components/MobileActionBar.tsx
@@ -33,7 +33,7 @@ export function MobileActionBar({
 
       {/* Bottom sheet */}
       {open && (
-        <div className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-lg border-t border-[var(--border)] bg-[var(--bg)] p-4">
+        <div className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-lg border-t border-[var(--border)] bg-[var(--bg)] p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]">
           <div className="mb-3 flex items-center justify-between">
             <span className="text-foreground text-sm font-medium capitalize">
               {open}
diff --git a/src/components/ReadingMode.tsx b/src/components/ReadingMode.tsx
index d1257c7a..0178c935 100644
--- a/src/components/ReadingMode.tsx
+++ b/src/components/ReadingMode.tsx
@@ -115,7 +115,7 @@ export function ReadingMode({
 
       {/* Bottom navigation */}
       <nav
-        className="flex items-center justify-between px-4 py-3 sm:px-6"
+        className="flex items-center justify-between px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:px-6"
         style={{ borderTop: "1px solid var(--border)" }}
       >
         {hasPrev ? (