Fix miniapp bottom padding — env(safe-area-inset-bottom) has no effect in Farcaster webview

[realproject7]

Bug

PR #606 added env(safe-area-inset-bottom) to MobileActionBar and ReadingMode, but the bottom bar is still clipped in the Farcaster miniapp. The fix had no effect.

Root Cause

The Farcaster miniapp webview does not expose CSS env(safe-area-inset-bottom) — it returns 0. The miniapp container handles safe areas at the native level, not via CSS environment variables. So pb-[calc(0.75rem+env(safe-area-inset-bottom))] evaluates to just pb-[0.75rem] — no extra padding.

Correct Fix

Use the existing usePlatformDetection() hook (from src/hooks/usePlatformDetection.ts) which already detects Farcaster/Base miniapp environments. When isMiniApp === true, add explicit extra bottom padding:

const { isMiniApp } = usePlatformDetection();

// Fixed bottom bar
<div className={`fixed inset-x-0 bottom-0 z-30 ... ${isMiniApp ? "pb-8" : "pb-3"}`}>

Apply this to:

1. MobileActionBar — the fixed Trade/Donate/Rate bar (line 55)
2. MobileActionBar bottom sheet — the expanded panel (line 36)
3. ReadingMode bottom nav — the Prev/Contents/Next bar

The usePlatformDetection() hook is already used in ShareButtons.tsx and other components, so this is a proven pattern.

Files to modify

• src/components/MobileActionBar.tsx — add usePlatformDetection(), conditional padding
• src/components/ReadingMode.tsx — add usePlatformDetection(), conditional padding

Branch

task/608-miniapp-padding-v2

Acceptance criteria

• MobileActionBar fully visible in Farcaster miniapp (extra bottom padding)
• ReadingMode bottom nav fully visible in Farcaster miniapp
• Regular mobile browser layout unaffected (no extra padding when isMiniApp = false)
• Desktop unaffected
• Build passes