From 1c442dcce65494396e2d2308408c48c615e0bd5f Mon Sep 17 00:00:00 2001
From: 7heMech <83923848+7heMech@users.noreply.github.com>
Date: Thu, 13 Nov 2025 02:44:24 +0200
Subject: [PATCH] True mobile layout with responsive table rows (sticky header)

---
 frontend/src/components/SiteContainer.tsx     |  2 +-
 frontend/src/components/SiteHeader.tsx        |  2 +-
 frontend/src/components/Table/TableLayout.tsx | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/SiteContainer.tsx b/frontend/src/components/SiteContainer.tsx
index 1722d88a..01a9cb52 100644
--- a/frontend/src/components/SiteContainer.tsx
+++ b/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>;
 }
diff --git a/frontend/src/components/SiteHeader.tsx b/frontend/src/components/SiteHeader.tsx
index e60eba43..3e419306 100644
--- a/frontend/src/components/SiteHeader.tsx
+++ b/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
diff --git a/frontend/src/components/Table/TableLayout.tsx b/frontend/src/components/Table/TableLayout.tsx
index c23f50b3..63034091 100644
--- a/frontend/src/components/Table/TableLayout.tsx
+++ b/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>
 	);
 }