From 94a00cb6d618119f28766c424dfa2912dc1fd483 Mon Sep 17 00:00:00 2001
From: diegosouzapw <diegosouzapw@users.noreply.github.com>
Date: Sat, 28 Mar 2026 21:53:07 -0300
Subject: [PATCH] feat: improve dashboard layout for smaller screens (#659)

---
 src/app/globals.css                               | 13 +++++++++++++
 src/shared/components/layouts/DashboardLayout.tsx |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c5f9362164..ac78afa1ab 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -337,3 +337,16 @@ button .material-symbols-outlined,
 .traffic-light.green {
   background: var(--color-traffic-green);
 }
+
+/* ── Mobile Layout Fixes (Issue #659) ── */
+@media (max-width: 768px) {
+  .ant-table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100vw;
+  }
+
+  .ant-table {
+    min-width: 600px; /* Prevent columns from crushing together */
+  }
+}
diff --git a/src/shared/components/layouts/DashboardLayout.tsx b/src/shared/components/layouts/DashboardLayout.tsx
index c9e068d056..da33e08dcc 100644
--- a/src/shared/components/layouts/DashboardLayout.tsx
+++ b/src/shared/components/layouts/DashboardLayout.tsx
@@ -57,8 +57,8 @@ export default function DashboardLayout({ children }) {
       >
         <Header onMenuClick={() => setSidebarOpen(true)} />
         <MaintenanceBanner />
-        <div className="flex-1 overflow-y-auto custom-scrollbar p-6 lg:p-10">
-          <div className="max-w-7xl mx-auto">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar p-4 sm:p-6 lg:p-10">
+          <div className="max-w-7xl mx-auto w-full">
             <Breadcrumbs />
             {children}
           </div>