From 7f7c9c35d9d77d4903a8b9f86cc7f415b198b202 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 27 Mar 2026 18:31:23 +0000
Subject: [PATCH] [#302] Fix miniapp bottom padding with platform detection

Use usePlatformDetection() hook instead of env(safe-area-inset-bottom)
for miniapp environments where CSS environment variables return 0.
When isMiniApp is true, apply explicit Tailwind padding (pb-8/pb-10).
Regular browser and desktop layouts use the existing safe-area-inset
fallback. Applied to MobileActionBar (fixed bar + bottom sheet) and
ReadingMode bottom nav.

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

diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
index a32c16ad..a5e2b242 100644
--- a/src/components/MobileActionBar.tsx
+++ b/src/components/MobileActionBar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, type ReactNode } from "react";
+import { usePlatformDetection } from "../hooks/usePlatformDetection";
 
 type Panel = "trade" | "donate" | "rate" | null;
 
@@ -14,6 +15,7 @@ export function MobileActionBar({
   rateContent?: ReactNode;
 }) {
   const [open, setOpen] = useState<Panel>(null);
+  const { isMiniApp } = usePlatformDetection();
 
   const buttons: { key: Panel; label: string; content?: ReactNode }[] = [
     { key: "trade", label: "Trade", content: tradeContent },
@@ -33,7 +35,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 pb-[calc(1rem+env(safe-area-inset-bottom))]">
+        <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 ${isMiniApp ? "pb-10" : "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}
@@ -52,7 +54,7 @@ export function MobileActionBar({
       )}
 
       {/* Fixed bottom bar */}
-      <div className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-3 gap-2 border-t border-[var(--border)] bg-[var(--bg)]/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur-sm">
+      <div className={`fixed inset-x-0 bottom-0 z-30 grid grid-cols-3 gap-2 border-t border-[var(--border)] bg-[var(--bg)]/95 px-3 pt-3 ${isMiniApp ? "pb-8" : "pb-[calc(0.75rem+env(safe-area-inset-bottom))]"} backdrop-blur-sm`}>
         {buttons.map(({ key, label }) => (
           <button
             key={key}
diff --git a/src/components/ReadingMode.tsx b/src/components/ReadingMode.tsx
index 0178c935..199e84e2 100644
--- a/src/components/ReadingMode.tsx
+++ b/src/components/ReadingMode.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback, useRef } from "react";
 import { StoryContent } from "./StoryContent";
+import { usePlatformDetection } from "../hooks/usePlatformDetection";
 
 interface Chapter {
   plotIndex: number;
@@ -27,6 +28,7 @@ export function ReadingMode({
   const [currentIdx, setCurrentIdx] = useState(initialChapterIndex);
   const [showToc, setShowToc] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+  const { isMiniApp } = usePlatformDetection();
 
   const chapter = chapters[currentIdx];
   const hasPrev = currentIdx > 0;
@@ -115,7 +117,7 @@ export function ReadingMode({
 
       {/* Bottom navigation */}
       <nav
-        className="flex items-center justify-between px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:px-6"
+        className={`flex items-center justify-between px-4 pt-3 ${isMiniApp ? "pb-8" : "pb-[calc(0.75rem+env(safe-area-inset-bottom))]"} sm:px-6`}
         style={{ borderTop: "1px solid var(--border)" }}
       >
         {hasPrev ? (