From f1c7a572a34c5937ddeab0476f1302ea227e879d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 24 Mar 2026 11:21:50 +0000
Subject: [PATCH] [#491] Fix mobile footer layout and bottom nav safe-area
 spacing

- Footer: add pb-20 on mobile for clearance above fixed bottom nav,
  stack layout vertically on small screens, pb-6 on desktop
- MobileActionBar: add safe-area-inset-bottom padding so buttons
  don't overlap the home indicator on notched devices

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

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8d8cac9e..c09dc278 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,10 +6,10 @@ const GITHUB_URL = "https://github.com/realproject7/plotlink-contracts";
 
 export function Footer() {
   return (
-    <footer className="border-t border-[var(--border)] bg-[var(--bg)] px-4 py-6 mt-16">
+    <footer className="border-t border-[var(--border)] bg-[var(--bg)] px-4 py-6 pb-20 lg:pb-6 mt-16">
       <div className="mx-auto max-w-5xl flex flex-col gap-4 text-xs">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="flex items-center gap-4 text-muted">
+        <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-4">
+          <div className="flex flex-wrap items-center gap-3 sm:gap-4 text-muted">
             <a
               href={CONTRACT_URL}
               target="_blank"
diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
index 1d4d7c61..676cb5e5 100644
--- a/src/components/MobileActionBar.tsx
+++ b/src/components/MobileActionBar.tsx
@@ -52,7 +52,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 p-3 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 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur-sm">
         {buttons.map(({ key, label }) => (
           <button
             key={key}