From 1cbe3e132601a9cccdff07e83d02ee04d8ad4d9e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Fri, 17 Oct 2025 17:44:15 +0200
Subject: [PATCH] refactor(Table): add unwrapped prop for direct table
 rendering; adjust minWidth calculation for responsiveness

---
 .../src/components/DataTable/DataTable.tsx    |  3 ++-
 .../DataTable/DataTableComponents.tsx         |  2 +-
 packages/client/src/components/Table.tsx      | 20 ++++++++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/DataTable/DataTable.tsx b/packages/client/src/components/DataTable/DataTable.tsx
index 11e4d4b69f..45b3ac138f 100644
--- a/packages/client/src/components/DataTable/DataTable.tsx
+++ b/packages/client/src/components/DataTable/DataTable.tsx
@@ -465,6 +465,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
           aria-label={localize('com_ui_data_table')}
           aria-rowcount={data.length}
           className="table-fixed"
+          unwrapped={true}
         >
           <TableHeader className="sticky top-0 z-10 bg-surface-secondary">
             {headerGroups.map((headerGroup) => (
@@ -516,7 +517,7 @@ function DataTable<TData extends Record<string, unknown>, TValue>({
                           width: `${metaWidth}%`,
                           maxWidth: `${metaWidth}%`,
                           minWidth: isSmallScreen
-                            ? `${Math.max(metaWidth * 0.8, 60)}px`
+                            ? `${Math.max(metaWidth * 0.7, 10)}%`
                             : `${metaWidth}%`,
                         }
                       : {};
diff --git a/packages/client/src/components/DataTable/DataTableComponents.tsx b/packages/client/src/components/DataTable/DataTableComponents.tsx
index 7bd773b4c6..de9abb6a14 100644
--- a/packages/client/src/components/DataTable/DataTableComponents.tsx
+++ b/packages/client/src/components/DataTable/DataTableComponents.tsx
@@ -76,7 +76,7 @@ const TableRowComponent = <TData extends Record<string, unknown>>(
               ? {
                   width: `${percent}%`,
                   maxWidth: `${percent}%`,
-                  minWidth: isSmallScreen ? `${Math.max(percent * 0.8, 60)}px` : `${percent}%`,
+                  minWidth: isSmallScreen ? `${Math.max(percent * 0.7, 10)}%` : `${percent}%`,
                 }
               : undefined;
 
diff --git a/packages/client/src/components/Table.tsx b/packages/client/src/components/Table.tsx
index 4d04b961fe..a14ac3a8ac 100644
--- a/packages/client/src/components/Table.tsx
+++ b/packages/client/src/components/Table.tsx
@@ -1,12 +1,22 @@
 import * as React from 'react';
 import { cn } from '~/utils';
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  unwrapped?: boolean;
+}
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className, unwrapped = false, ...props }, ref) => {
+    const tableElement = (
       <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  ),
+    );
+
+    if (unwrapped) {
+      return tableElement;
+    }
+
+    return <div className="relative w-full overflow-auto">{tableElement}</div>;
+  },
 );
 Table.displayName = 'Table';