From 2ba5f03f35986d03e16cb0a7a269839ec71fcfba Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Tue, 28 Apr 2026 15:51:52 +0100
Subject: [PATCH] refactor: optimize mobile layout with improved
 responsiveness, overflow handling, and touch interactions

---
 web/src/components/ServiceList.tsx | 22 ++++++-------
 web/src/components/ui/tabs.tsx     |  8 ++---
 web/src/index.css                  |  4 ++-
 web/src/pages/Dashboard.tsx        | 51 ++++++++++++++++--------------
 web/src/pages/ShopDetails.tsx      | 26 ++++++++-------
 5 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/web/src/components/ServiceList.tsx b/web/src/components/ServiceList.tsx
index a66a346..c286d6e 100644
--- a/web/src/components/ServiceList.tsx
+++ b/web/src/components/ServiceList.tsx
@@ -13,28 +13,28 @@ export const ServiceList = ({
 }) => (
   <div className="grid md:grid-cols-2 gap-4 sm:gap-6">
     {services.map((s) => (
-      <Card key={s.id} className="p-4 sm:p-6 border-none glass-card rounded-2xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
-        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-4">
-          <div className="flex-1 min-w-0 space-y-2">
-            <h3 className="font-black text-slate-900 text-lg sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
-            <div className="flex items-center gap-3">
-              <div className="flex items-center gap-1.5 px-2 py-1 bg-slate-100 rounded-lg text-xs font-bold text-slate-500 uppercase">
-                <Clock size={12} />
+      <Card key={s.id} className="p-3 sm:p-6 border-none glass-card rounded-xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-1.5 sm:gap-4">
+          <div className="flex-1 min-w-0 space-y-1">
+            <h3 className="font-black text-slate-900 text-base sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 rounded-md text-[10px] font-bold text-slate-500 uppercase">
+                <Clock size={10} />
                 <span>{s.duration} min</span>
               </div>
             </div>
           </div>
-          <div className="text-xl sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 sm:px-3 py-1 rounded-xl border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
+          <div className="text-lg sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
             {currency(s.price)}
           </div>
         </div>
         
         {onSelect && (
-          <div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-            <p className="text-xs font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
+          <div className="mt-3 sm:mt-6 pt-3 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
+            <p className="text-[10px] font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
             <Button 
               onClick={() => onSelect(s.id)} 
-              className="w-full sm:w-auto h-10 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-wider sm:tracking-widest text-xs px-6"
+              className="w-full sm:w-auto h-9 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-lg shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-tight sm:tracking-widest text-[11px] sm:text-xs px-4"
             >
               Reservar
             </Button>
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index ac781a5..07c8650 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -3,21 +3,21 @@ import { cn } from '../../lib/cn';
 type Tab = { id: string; label: string; badge?: number };
 
 export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; active: string; onChange: (id: string) => void; className?: string }) => (
-  <div className={cn("flex gap-1.5 sm:gap-2 p-1 bg-slate-100 rounded-2xl overflow-x-auto scrollbar-hide", className)}>
+  <div className={cn("flex gap-1 p-1 bg-slate-100 rounded-xl overflow-x-auto scrollbar-hide w-full", className)}>
     {tabs.map((t) => (
       <button
         key={t.id}
         onClick={() => onChange(t.id)}
         className={cn(
-          "px-3 sm:px-6 py-2 sm:py-2.5 text-[11px] sm:text-sm font-black uppercase tracking-wider sm:tracking-widest transition-all rounded-xl whitespace-nowrap shrink-0",
+          "px-3 sm:px-6 py-1.5 sm:py-2.5 text-[10px] sm:text-sm font-black uppercase tracking-tight sm:tracking-widest transition-all rounded-lg whitespace-nowrap shrink-0",
           active === t.id
-            ? "bg-slate-900 text-indigo-400 shadow-xl"
+            ? "bg-slate-900 text-indigo-400 shadow-lg"
             : "text-slate-500 hover:text-slate-900 hover:bg-white/50"
         )}
       >
         {t.label}
         {t.badge && (
-          <span className="ml-1.5 sm:ml-2 inline-flex items-center justify-center w-4 h-4 sm:w-5 sm:h-5 text-[8px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
+          <span className="ml-1 sm:ml-2 inline-flex items-center justify-center w-3.5 h-3.5 sm:w-5 sm:h-5 text-[7px] sm:text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
             {t.badge}
           </span>
         )}
diff --git a/web/src/index.css b/web/src/index.css
index 3620403..3e4c3b6 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -19,13 +19,15 @@
   }
 
   html, body {
-    overflow-x: hidden;
+    overflow-x: clip;
     width: 100%;
     max-width: 100vw;
+    position: relative;
   }
 
   body {
     @apply bg-[#f8fafc] text-slate-900 font-sans antialiased;
+    touch-action: pan-y;
     background-image: 
       radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.03) 0px, transparent 50%),
       radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.03) 0px, transparent 50%);
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index e6a1d18..d0c3053 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -409,7 +409,9 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
       </div>
 
       {/* Tabs */}
-      <Tabs tabs={sidebarTabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge }))} active={activeTab} onChange={(v) => setActiveTab(v as TabId)} />
+      <div className="w-full max-w-[100vw] overflow-hidden">
+        <Tabs tabs={sidebarTabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge }))} active={activeTab} onChange={(v) => setActiveTab(v as TabId)} />
+      </div>
 
       {/* Tab Content */}
       {activeTab === 'overview' && (
@@ -430,40 +432,43 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
           </div>
 
           {/* Stats Cards Principais */}
-          <div className="grid md:grid-cols-3 gap-4">
-            <Card className="p-6">
-              <div className="flex items-center justify-between mb-3">
-                <div className="p-3 bg-indigo-500 rounded-lg text-white">
-                  <Calendar size={24} />
+          <div className="grid md:grid-cols-3 gap-3">
+            <Card className="p-4 sm:p-6">
+              <div className="flex items-center justify-between mb-2 sm:mb-3">
+                <div className="p-2 sm:p-3 bg-indigo-500 rounded-lg text-white">
+                  <Calendar size={20} className="sm:hidden" />
+                  <Calendar size={24} className="hidden sm:block" />
                 </div>
               </div>
-              <p className="text-sm text-slate-600 mb-1">Total de reservas</p>
-              <p className="text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
-              <p className="text-xs text-slate-500 mt-2">Reservas da plataforma: {allShopAppointments.length}</p>
+              <p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Total de reservas</p>
+              <p className="text-2xl sm:text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
+              <p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Reservas da plataforma: {allShopAppointments.length}</p>
             </Card>
 
-            <Card className="p-6">
-              <div className="flex items-center justify-between mb-3">
-                <div className="p-3 bg-blue-500 rounded-lg text-white">
-                  <Globe size={24} />
+            <Card className="p-4 sm:p-6">
+              <div className="flex items-center justify-between mb-2 sm:mb-3">
+                <div className="p-2 sm:p-3 bg-blue-500 rounded-lg text-white">
+                  <Globe size={20} className="sm:hidden" />
+                  <Globe size={24} className="hidden sm:block" />
                 </div>
               </div>
-              <p className="text-sm text-slate-600 mb-1">Reservas online</p>
-              <p className="text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
-              <p className="text-xs text-slate-500 mt-2">Marcações feitas pela plataforma</p>
+              <p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Reservas online</p>
+              <p className="text-2xl sm:text-3xl font-bold text-slate-900">{allShopAppointments.length}</p>
+              <p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Marcações feitas pela plataforma</p>
             </Card>
 
-            <Card className="p-6">
-              <div className="flex items-center justify-between mb-3">
-                <div className="p-3 bg-green-500 rounded-lg text-white">
-                  <UserPlus size={24} />
+            <Card className="p-4 sm:p-6">
+              <div className="flex items-center justify-between mb-2 sm:mb-3">
+                <div className="p-2 sm:p-3 bg-green-500 rounded-lg text-white">
+                  <UserPlus size={20} className="sm:hidden" />
+                  <UserPlus size={24} className="hidden sm:block" />
                 </div>
               </div>
-              <p className="text-sm text-slate-600 mb-1">Novos clientes</p>
-              <p className="text-3xl font-bold text-slate-900">
+              <p className="text-xs sm:text-sm text-slate-600 mb-0.5 sm:mb-1">Novos clientes</p>
+              <p className="text-2xl sm:text-3xl font-bold text-slate-900">
                 {new Set(allShopAppointments.map(a => a.customerId)).size}
               </p>
-              <p className="text-xs text-slate-500 mt-2">Clientes únicos</p>
+              <p className="text-[10px] sm:text-xs text-slate-500 mt-1.5 sm:mt-2">Clientes únicos</p>
             </Card>
           </div>
 
diff --git a/web/src/pages/ShopDetails.tsx b/web/src/pages/ShopDetails.tsx
index c69aaf6..f00a5bf 100644
--- a/web/src/pages/ShopDetails.tsx
+++ b/web/src/pages/ShopDetails.tsx
@@ -98,18 +98,20 @@ export default function ShopDetails() {
 
       <div className="grid gap-4 sm:gap-8">
         <div className="flex flex-col gap-3 sm:gap-4 bg-white/50 backdrop-blur-sm p-1.5 sm:p-2 rounded-2xl sm:rounded-[2rem] border border-white/50">
-          <Tabs
-            tabs={[
-              { id: 'servicos', label: 'Serviços' },
-              { id: 'barbeiros', label: 'Barbeiros' },
-              { id: 'produtos', label: 'Produtos' },
-              { id: 'detalhes', label: 'Detalhes' },
-            ]}
-            active={tab}
-            onChange={(v) => setTab(v as typeof tab)}
-            className="border-none bg-transparent"
-          />
-          <div className="px-3 sm:px-6 py-2 text-[10px] sm:text-xs font-black text-slate-400 uppercase tracking-widest bg-white rounded-xl sm:rounded-2xl border border-slate-100 shadow-sm text-center sm:text-left">
+          <div className="w-full max-w-[100vw] overflow-hidden">
+            <Tabs
+              tabs={[
+                { id: 'servicos', label: 'Serviços' },
+                { id: 'barbeiros', label: 'Barbeiros' },
+                { id: 'produtos', label: 'Produtos' },
+                { id: 'detalhes', label: 'Detalhes' },
+              ]}
+              active={tab}
+              onChange={(v) => setTab(v as typeof tab)}
+              className="border-none bg-transparent"
+            />
+          </div>
+          <div className="px-3 sm:px-6 py-2 text-[9px] sm:text-xs font-black text-slate-400 uppercase tracking-widest bg-white rounded-xl sm:rounded-2xl border border-slate-100 shadow-sm text-center sm:text-left">
             {(shop.services || []).length} SERVIÇOS · {(shop.barbers || []).length} BARBEIROS
           </div>
         </div>