From e28a81c07c0ed3089b530b590b3decc233f4396f Mon Sep 17 00:00:00 2001
From: Galindo97 <agalindo2aduanasoft.com.mx>
Date: Wed, 21 Jan 2026 15:44:54 -0600
Subject: [PATCH] fix(table): add overflow handling and className support for
 table columns

---
 frontend/src/app.css                          |  2 +-
 .../dashboard/pedimentos/columns.ts           | 22 +++++++++++++++++++
 .../dashboard/pedimentos/data-table.svelte    | 10 ++++-----
 frontend/src/routes/dashboard/+layout.svelte  |  4 ++--
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 8d9a66ab..6c344082 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -118,6 +118,6 @@
 		@apply border-border outline-ring/50;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground overflow-x-hidden;
 	}
 }
diff --git a/frontend/src/lib/components/dashboard/pedimentos/columns.ts b/frontend/src/lib/components/dashboard/pedimentos/columns.ts
index 2bdfbe51..d56a174e 100644
--- a/frontend/src/lib/components/dashboard/pedimentos/columns.ts
+++ b/frontend/src/lib/components/dashboard/pedimentos/columns.ts
@@ -4,6 +4,13 @@ import { createRawSnippet } from "svelte";
 import DataTableActions from "./data-table-actions.svelte";
 import type { Pedimento } from "$lib/api/dashboard/a76/pedimentos";
 
+// Extender el tipo ColumnMeta para incluir className
+declare module "@tanstack/table-core" {
+	interface ColumnMeta<TData extends unknown, TValue> {
+		className?: string;
+	}
+}
+
 /**
  * Formatea un número como moneda
  */
@@ -120,6 +127,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_type",
 			header: "Tipo",
+			meta: { className: "hidden md:table-cell" },
 			cell: ({ row }) => {
 				const typeSnippet = createRawSnippet<[{ type?: string | null }]>((getType) => {
 					const { type } = getType();
@@ -134,6 +142,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_code",
 			header: "Clave",
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const codeSnippet = createRawSnippet<[{ code?: string | null }]>((getCode) => {
 					const { code } = getCode();
@@ -148,6 +157,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "regime",
 			header: "Régimen",
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const regimeSnippet = createRawSnippet<[{ regime?: string | null }]>((getRegime) => {
 					const { regime } = getRegime();
@@ -162,6 +172,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_dates.start_date",
 			header: "Fecha Inicio",
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
 					const { date } = getDate();
@@ -176,6 +187,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_dates.end_date",
 			header: "Fecha Final",
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
 					const { date } = getDate();
@@ -190,6 +202,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_dates.payment_date",
 			header: "Fecha de Pago",
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
 					const { date } = getDate();
@@ -204,6 +217,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_config_update_rectification.pediment_rectifed_18",
 			header: "Pedimento 18",
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const ped18Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
 					const { value } = getValue();
@@ -218,6 +232,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_config_update_rectification.r1",
 			header: "Pedimento R1",
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const r1Snippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
 					const { value } = getValue();
@@ -232,6 +247,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_validation.electronic_signature",
 			header: "Acuse Electrónico",
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const ackSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
 					const { value } = getValue();
@@ -249,6 +265,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "pedimento_payments.total_contributions",
 			header: "¿Se pagó el impuesto?",
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const paidSnippet = createRawSnippet<[{ value?: string | null }]>((getValue) => {
 					const { value } = getValue();
@@ -266,6 +283,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "client_id",
 			header: "Cliente",
+			meta: { className: "hidden md:table-cell" },
 			cell: ({ row }) => {
 				const clientSnippet = createRawSnippet<[{ clientId?: number | null }]>((getClient) => {
 					const { clientId } = getClient();
@@ -309,6 +327,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 				});
 				return renderSnippet(headerSnippet, {});
 			},
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const valueSnippet = createRawSnippet<[{ value: string }]>((getValue) => {
 					const { value } = getValue();
@@ -330,6 +349,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 				});
 				return renderSnippet(headerSnippet, {});
 			},
+			meta: { className: "hidden xl:table-cell" },
 			cell: ({ row }) => {
 				const priceSnippet = createRawSnippet<[{ price: string }]>((getPrice) => {
 					const { price } = getPrice();
@@ -351,6 +371,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 				});
 				return renderSnippet(headerSnippet, {});
 			},
+			meta: { className: "hidden lg:table-cell" },
 			cell: ({ row }) => {
 				const weightSnippet = createRawSnippet<[{ weight: string }]>((getWeight) => {
 					const { weight } = getWeight();
@@ -365,6 +386,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
 		{
 			accessorKey: "created_at",
 			header: "Fecha de Creación",
+			meta: { className: "hidden 2xl:table-cell" },
 			cell: ({ row }) => {
 				const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
 					const { date } = getDate();
diff --git a/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte b/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
index 4c448e3d..1a5b4fd6 100644
--- a/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
@@ -60,13 +60,13 @@
 </script>
 
 <div class="w-full">
-	<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
-		<Table.Root>
-			<Table.Header class="bg-background">
+	<div class="rounded-md border max-h-[600px] overflow-auto" bind:this={scrollContainer}>
+		<Table.Root class="w-full">
+			<Table.Header class="bg-background sticky top-0 z-10">
 				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
 					<Table.Row>
 						{#each headerGroup.headers as header (header.id)}
-							<Table.Head>
+							<Table.Head class="whitespace-nowrap {header.column.columnDef.meta?.className || ''}">
 								{#if !header.isPlaceholder}
 									<FlexRender
 										content={header.column.columnDef.header}
@@ -82,7 +82,7 @@
 				{#each table.getRowModel().rows as row (row.id)}
 					<Table.Row data-state={row.getIsSelected() && "selected"}>
 						{#each row.getVisibleCells() as cell (cell.id)}
-							<Table.Cell>
+							<Table.Cell class="whitespace-nowrap {cell.column.columnDef.meta?.className || ''}">
 								<FlexRender
 									content={cell.column.columnDef.cell}
 									context={cell.getContext()}
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 60b5d95c..63921af7 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -33,7 +33,7 @@
 
 <Sidebar.Provider>
 	<AppSidebar />
-	<Sidebar.Inset>
+	<Sidebar.Inset class="overflow-x-hidden">
 		<header
 			class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
 		>
@@ -55,7 +55,7 @@
 				-->
 			</div>
 		</header>
-		<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+		<div class="flex flex-1 flex-col gap-4 p-4 pt-0 overflow-x-hidden">
 			<!-- Contenido de cada página -->
 			{@render children()}
 		</div>