fix: Table component responsive issue

brainstormforce · Dec 23, 2024 · 5b04b4b · 5b04b4b
1 parent 45a8f00
commit 5b04b4b
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -216,16 +216,20 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="flow-root overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
-				<table
-					className={ cn(
-						'table-fixed min-w-full border-collapse border-spacing-0',
-						className
-					) }
-					{ ...props }
-				>
-					{ restChildren }
-				</table>
+			<div className="flow-root divide-y divide-x-0 divide-solid divide-border-subtle">
+				<div className="overflow-x-auto w-full">
+					<div className="relative">
+						<table
+							className={ cn(
+								'table-fixed min-w-full border-collapse border-spacing-0',
+								className
+							) }
+							{ ...props }
+						>
+							{ restChildren }
+						</table>
+					</div>
+				</div>
 				{ footer }
 			</div>
 		</TableContext.Provider>