bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: make scanner viewport responsive with fluid sizing

Browse Source 
- 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
This commit is contained in:
Daniel Bedeleanu
2026-04-18 14:13:49 +00:00
parent 61fd5313a2
commit 96ffc71ca1
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components/Scanner.tsx
View File

@@ -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)]" />