True mobile layout with responsive table rows (sticky header)

Author: 7heMech

frontend/src/components/SiteContainer.tsx

@@ -2,5 +2,5 @@ interface Props {
 	children: React.ReactNode;
 }
 export function SiteContainer({ children }: Props) {
-	return <div className="container-xl py-3">{children}</div>;
+	return <div className="container-xl py-3 min-w-0 overflow-x-auto">{children}</div>;
 }

frontend/src/components/SiteHeader.tsx

@@ -25,7 +25,7 @@ export function SiteHeader() {
 				>
 					<span className="navbar-toggler-icon" />
 				</button>
-				<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+				<div className="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
 					<NavLink to="/">
 						<div className={styles.logo}>
 							<img

frontend/src/components/Table/TableLayout.tsx

@@ -12,10 +12,12 @@ interface TableLayoutProps<TFields> {
 function TableLayout<TFields>(props: TableLayoutProps<TFields>) {
 	const hasRows = props.tableInstance.getRowModel().rows.length > 0;
 	return (
-		<table className="table table-vcenter table-selectable mb-0">
-			{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
-			<TableBody {...props} />
-		</table>
+		<div className="table-responsive">
+			<table className="table table-vcenter table-selectable mb-0">
+				{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
+				<TableBody {...props} />
+			</table>
+		</div>
 	);
 }