From d6f9b512052fefc1b4ee2a2e0592cf207ef12c93 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Tue, 28 Apr 2026 15:41:07 +0100
Subject: [PATCH] feat: implement mobile-responsive layout adjustments and
 horizontal scrollable containers across components

---
 web/src/components/ServiceList.tsx  | 15 ++++++++-------
 web/src/components/layout/Shell.tsx |  2 +-
 web/src/components/ui/tabs.tsx      |  6 +++---
 web/src/index.css                   |  8 ++++++++
 web/src/pages/Dashboard.tsx         |  8 ++++----
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/components/ServiceList.tsx b/web/src/components/ServiceList.tsx
index 442c8f9..a66a346 100644
--- a/web/src/components/ServiceList.tsx
+++ b/web/src/components/ServiceList.tsx
@@ -13,10 +13,10 @@ 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">
-        <div className="flex items-start justify-between gap-3 sm:gap-4">
+      <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 truncate">{s.name}</h3>
+            <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} />
@@ -24,17 +24,17 @@ export const ServiceList = ({
               </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">
+          <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">
             {currency(s.price)}
           </div>
         </div>
         
         {onSelect && (
-          <div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-slate-100 flex items-center justify-between gap-3 sm:gap-4">
-            <p className="text-xs font-medium text-slate-400 max-w-[100px] sm:max-w-[150px] shrink-0">Lugar disponível hoje</p>
+          <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>
             <Button 
               onClick={() => onSelect(s.id)} 
-              className="flex-1 min-w-0 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-[10px] sm:text-xs truncate px-3 sm:px-4"
+              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"
             >
               Reservar
             </Button>
@@ -44,3 +44,4 @@ export const ServiceList = ({
     ))}
   </div>
 );
+
diff --git a/web/src/components/layout/Shell.tsx b/web/src/components/layout/Shell.tsx
index a2f7377..70d4d0a 100644
--- a/web/src/components/layout/Shell.tsx
+++ b/web/src/components/layout/Shell.tsx
@@ -5,7 +5,7 @@ export function Shell() {
   return (
     <>
       <Header />
-      <main className="mx-auto max-w-5xl px-3 sm:px-4 py-4 sm:py-6 overflow-x-hidden">
+      <main className="mx-auto max-w-5xl px-3 sm:px-4 py-4 sm:py-6">
         <Outlet />
       </main>
     </>
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index 6a6ecbe..ac781a5 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -3,13 +3,13 @@ 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-2 p-1 bg-slate-100 rounded-2xl w-fit", className)}>
+  <div className={cn("flex gap-1.5 sm:gap-2 p-1 bg-slate-100 rounded-2xl overflow-x-auto scrollbar-hide", className)}>
     {tabs.map((t) => (
       <button
         key={t.id}
         onClick={() => onChange(t.id)}
         className={cn(
-          "px-6 py-2.5 text-sm font-black uppercase tracking-widest transition-all rounded-xl whitespace-nowrap",
+          "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",
           active === t.id
             ? "bg-slate-900 text-indigo-400 shadow-xl"
             : "text-slate-500 hover:text-slate-900 hover:bg-white/50"
@@ -17,7 +17,7 @@ export const Tabs = ({ tabs, active, onChange, className }: { tabs: Tab[]; activ
       >
         {t.label}
         {t.badge && (
-          <span className="ml-2 inline-flex items-center justify-center w-5 h-5 text-[10px] font-black text-white bg-slate-900 rounded-full border border-indigo-500/50">
+          <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">
             {t.badge}
           </span>
         )}
diff --git a/web/src/index.css b/web/src/index.css
index cb919be..3620403 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -60,6 +60,14 @@
     @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-xl shadow-slate-200/50;
   }
 
+  /* Hide scrollbar but keep scroll functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 
   .indigo-gradient {
     @apply bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600;
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 07ef711..e6a1d18 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -387,17 +387,17 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+      <div className="flex flex-col gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900">{shop.name}</h1>
+          <h1 className="text-xl sm:text-2xl font-bold text-slate-900">{shop.name}</h1>
           <p className="text-sm text-slate-600">{shop.address}</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5 sm:gap-2 overflow-x-auto scrollbar-hide pb-1">
           {(['hoje', 'semana', 'mes', 'total'] as const).map((p) => (
             <button
               key={p}
               onClick={() => setPeriod(p)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${period === p
+              className={`px-2.5 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium border transition-all whitespace-nowrap shrink-0 ${period === p
                 ? 'border-indigo-500 bg-indigo-50 text-indigo-700 shadow-sm'
                 : 'border-slate-200 text-slate-700 hover:border-indigo-300 hover:bg-indigo-50/50'
                 }`}