From 4350834218bb9e3247934dd7e893cb2501ab34e8 Mon Sep 17 00:00:00 2001
From: orveth <orveth@proton.me>
Date: Fri, 15 May 2026 22:05:29 -0700
Subject: [PATCH 1/2] fix(scan): float paste button over fullscreen scanner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous paste button sat in `PageFooter pb-14`, which on mobile
browsers (where QRScanner is `fixed inset-0 h-screen w-screen`) put it
in a stacking context behind the fullscreen camera — the visible
artifact was the library's scan-region outline appearing to slide into
the paste area as the URL bar resized `dvh`.

Render the paste button as a `fixed bottom-4 left-1/2 -translate-x-1/2
z-20` overlay so it floats above the camera at the visual bottom of the
viewport (`fixed` so it pins to the visual viewport across URL-bar
collapse/expand). The library's outline stays centered on the scanner
container at `50%`; on typical mobile viewports its bottom edge lands
well above `bottom-4`, so no overlap.

Leaves `QRScanner` untouched and keeps `send.scan` / `receive.scan` /
`transfer.scan` in their existing fullscreen layout.
---
 app/routes/_protected.scan.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/routes/_protected.scan.tsx b/app/routes/_protected.scan.tsx
index 31805eccd..f90316121 100644
--- a/app/routes/_protected.scan.tsx
+++ b/app/routes/_protected.scan.tsx
@@ -3,7 +3,6 @@ import {
   ClosePageButton,
   Page,
   PageContent,
-  PageFooter,
   PageHeader,
   PageHeaderTitle,
 } from '~/components/page';
@@ -82,11 +81,13 @@ export default function ScanPage() {
       <PageContent className="relative flex items-center justify-center">
         <QRScanner onDecode={handleInput} />
       </PageContent>
-      <PageFooter className="pb-14">
-        <Button type="button" onClick={handlePaste}>
-          <Clipboard className="h-5 w-5" /> Paste
-        </Button>
-      </PageFooter>
+      <Button
+        type="button"
+        onClick={handlePaste}
+        className="-translate-x-1/2 fixed bottom-4 left-1/2 z-20"
+      >
+        <Clipboard className="h-5 w-5" /> Paste
+      </Button>
     </Page>
   );
 }

From 257db612cfa2d16b918f46f5017a1bcf42cbddab Mon Sep 17 00:00:00 2001
From: orveth <orveth@proton.me>
Date: Fri, 15 May 2026 22:21:22 -0700
Subject: [PATCH 2/2] fix(scan): lift paste button above iOS PWA home indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use `bottom-[calc(env(safe-area-inset-bottom)+1rem)]` so the paste
button stays 16px above the visible bottom in mobile browsers
(safe-area-inset = 0) AND clears the iOS home indicator in installed
PWA (safe-area-inset ≈ 34px → button lifts ~50px from viewport edge).
---
 app/routes/_protected.scan.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/_protected.scan.tsx b/app/routes/_protected.scan.tsx
index f90316121..fab8761b1 100644
--- a/app/routes/_protected.scan.tsx
+++ b/app/routes/_protected.scan.tsx
@@ -84,7 +84,7 @@ export default function ScanPage() {
       <Button
         type="button"
         onClick={handlePaste}
-        className="-translate-x-1/2 fixed bottom-4 left-1/2 z-20"
+        className="-translate-x-1/2 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 z-20"
       >
         <Clipboard className="h-5 w-5" /> Paste
       </Button>