Fix: tabs scrolleable nativa sin ScrollArea

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} />