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

fix: critical mobile viewport fixes - login, modals, page constraints

Browse Source 
- Remove min-h-screen or make responsive (md:min-h-screen for desktop only)
- Login modal: p-8 → p-4 md:p-6, space-y-8 → space-y-3 md:space-y-4
- NewItemDialog: responsive spacing p-4 md:p-6, gaps 3 md:gap-4
- StockAdjustmentPanel: p-6 → p-4 md:p-6, gaps/spacing reduced for mobile
- All container padding and gaps now follow mobile-first pattern
- Fixes viewport overflow on 375px portrait mode
- Tests: 291/291 passing
This commit is contained in:
Daniel Bedeleanu
2026-04-19 19:04:17 +03:00
parent f05fe4b1b6
commit 2cbc036eb2
9 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components/AdminOverlay.tsx
View File

@@ -115,7 +115,7 @@ export default function AdminOverlay({
/>
<div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-background/60 animate-in fade-in duration-300">
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-surface border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
<div className="p-6 border-b border-slate-800 flex items-center justify-between">
<div className="p-3 md:p-6 border-b border-slate-800 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-slate-800 rounded-xl text-primary">
<Shield size={20} />
@@ -132,8 +132,8 @@ export default function AdminOverlay({
</button>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-8">
<section className="space-y-4">
<div className="flex-1 overflow-y-auto p-3 md:p-6 space-y-3 md:space-y-4">
<section className="space-y-2 md:space-y-3">
<div className="flex items-center justify-between">
<div>
<h3 className="text-sm font-normal text-secondary">User Management</h3>

6
frontend/components/NewItemDialog.tsx
View File

@@ -15,7 +15,7 @@ interface NewItemDialogProps {
export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewItemDialogProps) {
return (
<div className="flex flex-col items-center py-8 text-center gap-6">
<div className="flex flex-col items-center py-3 md:py-4 text-center gap-3 md:gap-4">
<button
onClick={onScannerClick}
className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
@@ -23,10 +23,10 @@ export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewIte
<Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
</button>
<div className="w-full flex justify-center mt-4">
<div className="w-full flex justify-center">
<button
onClick={onAddItemClick}
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-4"
className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-2 md:gap-3"
>
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
<Sparkles size={32} />

12
frontend/components/StockAdjustmentPanel.tsx
View File

@@ -63,8 +63,8 @@ export default function StockAdjustmentPanel({
return (
<div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-6">
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-4 md:p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-3 md:mb-4">
<h3 className="text-xl font-normal tracking-tight flex items-center gap-2">
<span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
{!isEditing && (
@@ -101,7 +101,7 @@ export default function StockAdjustmentPanel({
</div>
{isEditing ? (
<div className="space-y-4 mb-8">
<div className="space-y-2 md:space-y-3 mb-4 md:mb-6">
<div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
@@ -229,7 +229,7 @@ export default function StockAdjustmentPanel({
</div>
) : (
<>
<div className="flex p-1 bg-background rounded-2xl mb-8">
<div className="flex p-1 bg-background rounded-2xl mb-4 md:mb-6">
{[
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
@@ -249,8 +249,8 @@ export default function StockAdjustmentPanel({
))}
</div>
<div className="flex flex-col items-center gap-6 mb-8">
<div className="flex items-center gap-8">
<div className="flex flex-col items-center gap-3 md:gap-4 mb-4 md:mb-6">
<div className="flex items-center gap-2 md:gap-4">
<button
onClick={() => onQuantityChange(Math.max(1, adjustQty - 1))}
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"