From f2aca72d54c3144d4b04f294916a83f33d662a50 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Fri, 17 Apr 2026 11:30:17 -0300
Subject: [PATCH] Fix: tabs scrolleable nativa sin ScrollArea

---
 src/sections/HistoriaClinica.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index 2cf7537..506781e 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -47,7 +47,6 @@ import { Label } from '@/components/ui/label';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
@@ -471,8 +470,8 @@ export function HistoriaClinica({
 
 
       <Tabs value={tabActivo} onValueChange={setTabActivo}>
-        <ScrollArea className="w-full whitespace-nowrap rounded-md">
-          <TabsList className="flex w-full gap-1 pb-2">
+        <div className="overflow-x-auto -mx-4 px-4">
+          <TabsList className="flex w-max min-w-full gap-1 pb-2">
             <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
               <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
               <span className="hidden sm:inline">Evoluciones</span>
@@ -512,8 +511,7 @@ export function HistoriaClinica({
               <span className="hidden sm:inline">Interconsultas</span>
             </TabsTrigger>
           </TabsList>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
+        </div>
 
         <TabsContent value="laboratorios" className="mt-4">
           <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />