Hacer tabs scrolleable en HistoriaClinica para responsive

src/components/ui/scroll-area.tsx

@@ -1,58 +1,46 @@
-"use client"
-
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
-function ScrollArea({
+const ScrollArea = React.forwardRef<
-  className,
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  children,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
   <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
+    ref={ref}
-      className={cn("relative", className)}
+    className={cn("relative overflow-hidden", className)}
     {...props}
   >
-      <ScrollAreaPrimitive.Viewport
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-  )
+))
-}
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
-function ScrollBar({
+const ScrollBar = React.forwardRef<
-  className,
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  orientation = "vertical",
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
-  ...props
+>(({ className, orientation = "vertical", ...props }, ref) => (
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
+    ref={ref}
     orientation={orientation}
     className={cn(
-        "flex touch-none p-px transition-colors select-none",
+      "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
-      <ScrollAreaPrimitive.ScrollAreaThumb
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+))
-}
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
 
 export { ScrollArea, ScrollBar }

src/components/ui/tabs.tsx

@@ -5,62 +5,51 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "@/lib/utils"
 
-function Tabs({
+const Tabs = TabsPrimitive.Root
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
 
-function TabsList({
+const TabsList = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.List>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.List
-      data-slot="tabs-list"
+    ref={ref}
     className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TabsList.displayName = TabsPrimitive.List.displayName
 
-function TabsTrigger({
+const TabsTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
+    ref={ref}
     className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
-function TabsContent({
+const TabsContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.Content
-      data-slot="tabs-content"
+    ref={ref}
-      className={cn("flex-1 outline-none", className)}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+TabsContent.displayName = TabsPrimitive.Content.displayName
 
 export { Tabs, TabsList, TabsTrigger, TabsContent }

src/sections/HistoriaClinica.tsx

@@ -47,6 +47,7 @@ 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';
@@ -470,7 +471,8 @@ export function HistoriaClinica({
 
 
       <Tabs value={tabActivo} onValueChange={setTabActivo}>
-        <TabsList className="flex w-full overflow-x-auto gap-1 pb-2">
+        <ScrollArea className="w-full whitespace-nowrap rounded-md">
+          <TabsList className="flex 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>
@@ -510,6 +512,8 @@ export function HistoriaClinica({
               <span className="hidden sm:inline">Interconsultas</span>
             </TabsTrigger>
           </TabsList>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
 
         <TabsContent value="laboratorios" className="mt-4">
           <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />