From 96ffc71ca107c526c5057abb3cbff7ab233f0146 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 18 Apr 2026 14:13:49 +0000
Subject: [PATCH] refactor: make scanner viewport responsive with fluid sizing

- Replace fixed w-[85%] h-[85%] with responsive padding (p-4 sm:p-6)
- Use absolute inset (inset-4 sm:inset-6) for adaptive spacing
- Inner scanning frame now w-full h-full to adapt to viewport
- Works seamlessly across 320px mobile to 1024px+ desktop
---
 frontend/components/Scanner.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Scanner.tsx b/frontend/components/Scanner.tsx
index 93d6e204..4c1512a8 100644
--- a/frontend/components/Scanner.tsx
+++ b/frontend/components/Scanner.tsx
@@ -216,9 +216,9 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
   return (
     <div className="w-full max-w-md mx-auto flex flex-col gap-6">
       {/* Video Viewport Area */}
-      <div className="relative w-full aspect-square overflow-hidden rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-background border-2 border-slate-800/50">
-        <div className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
-          <div className="w-[85%] h-[85%] border border-primary/30 rounded-[2rem] relative">
+      <div className="relative w-full aspect-square overflow-hidden rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-background border-2 border-slate-800/50 p-4 sm:p-6">
+        <div className="absolute inset-4 sm:inset-6 z-10 pointer-events-none flex items-center justify-center">
+          <div className="w-full h-full border border-primary/30 rounded-[2rem] relative">
             <div className="absolute top-0 left-0 w-10 h-10 border-t-4 border-l-4 border-primary rounded-tl-2xl shadow-[0_0_15px_rgba(59,130,246,0.5)]" />
             <div className="absolute top-0 right-0 w-10 h-10 border-t-4 border-r-4 border-primary rounded-tr-2xl shadow-[0_0_15px_rgba(59,130,246,0.5)]" />
             <div className="absolute bottom-0 left-0 w-10 h-10 border-b-4 border-l-4 border-primary rounded-bl-2xl shadow-[0_0_15px_rgba(59,130,246,0.5)]" />