From 471830de8f85d2ce2e02b6d0965a8b12a918bf8d Mon Sep 17 00:00:00 2001
From: Louis King <jinglemansweep@gmail.com>
Date: Fri, 24 Jul 2026 23:21:00 +0100
Subject: [PATCH] fix(web): resolve horizontal overflow on Dashboard and Routes
 (mobile)

Dashboard Recent Adverts widget overflowed because its card (a CSS
grid item with default min-width: auto) grew to the table's intrinsic
min-content width, preventing the overflow-x-auto wrapper from
engaging. Add min-w-0 to both bottom-grid cards and constrain the
Node name cell with max-w + truncate to reduce the table's min-width.

Routes had page-level horizontal scroll with no visible scrollbar due
to three triggers and no overflow containment in the ancestor chain:
(1) the history day-label flex row whose flex-1 spans had no min-w-0,
(2) -mx-1 on every clickable MatchRow, and (3) a Chart.js responsive
canvas in an unconstrained parent. Add min-w-0 to the card grid item,
chart wrapper, and label spans (with truncate); add overflow-hidden
to the MatchRow container to clip the negative-margin hover-bg.
---
 .../web/static/js/spa-react/pages/Dashboard.tsx        |  8 ++++----
 .../web/static/js/spa-react/pages/Routes.tsx           | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx b/src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx
index b107e94..6edc257 100644
--- a/src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx
+++ b/src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx
@@ -563,7 +563,7 @@ export function DashboardPage() {
         <div className={`grid grid-cols-1 ${gridCols(bottomCount)} gap-6`}>
           {showAdverts && (
             <div
-              className="card bg-base-100 shadow-xl panel-accent"
+              className="card bg-base-100 shadow-xl panel-accent min-w-0"
               style={panelStyle("--color-adverts")}
             >
               <div className="card-body">
@@ -604,12 +604,12 @@ export function DashboardPage() {
                                   to={`/nodes/${ad.public_key}`}
                                   className="link link-hover"
                                 >
-                                  <div className="font-medium">
+                                  <div className="font-medium max-w-[10rem] truncate">
                                     {displayName}
                                   </div>
                                 </Link>
                                 {friendlyName && (
-                                  <div className="text-xs opacity-50 font-mono">
+                                  <div className="text-xs opacity-50 font-mono max-w-[10rem] truncate">
                                     {ad.public_key.slice(0, 12)}...
                                   </div>
                                 )}
@@ -642,7 +642,7 @@ export function DashboardPage() {
 
           {showMessages && channelEntries.length > 0 && (
             <div
-              className="card bg-base-100 shadow-xl panel-accent"
+              className="card bg-base-100 shadow-xl panel-accent min-w-0"
               style={panelStyle("--color-messages")}
             >
               <div className="card-body">
diff --git a/src/meshcore_hub/web/static/js/spa-react/pages/Routes.tsx b/src/meshcore_hub/web/static/js/spa-react/pages/Routes.tsx
index 7098792..3bcfb40 100644
--- a/src/meshcore_hub/web/static/js/spa-react/pages/Routes.tsx
+++ b/src/meshcore_hub/web/static/js/spa-react/pages/Routes.tsx
@@ -466,12 +466,12 @@ function DetailContent({
   return (
     <div className="mt-2 space-y-3 text-sm">
       {history && (
-        <div className="mb-3">
+        <div className="mb-3 min-w-0">
           <RouteDetailStrip data={history} />
           {historyData.length > 0 && (
-            <div className="flex text-xs opacity-50 mt-0.5">
+            <div className="flex text-xs opacity-50 mt-0.5 min-w-0">
               {historyData.map((d, i) => (
-                <span key={d.date} className="flex-1 text-center">
+                <span key={d.date} className="flex-1 text-center min-w-0 truncate">
                   {i === historyData.length - 1
                     ? t("routes.last_n_hours", { n: route.window_hours })
                     : new Date(`${d.date}T00:00:00`).toLocaleDateString(
@@ -487,7 +487,7 @@ function DetailContent({
       {matches.length > 0 && (
         <div>
           <strong className="opacity-70">{t("routes.recent_packets")}</strong>
-          <div className="mt-2 space-y-2">
+          <div className="mt-2 space-y-2 overflow-hidden">
             {matches.map((m, i) => (
               <MatchRow
                 key={`${m.packet_hash || "match"}-${i}`}
@@ -542,7 +542,7 @@ function RouteCard({
 
   return (
     <div
-      className="card bg-base-100 shadow-xl h-full"
+      className="card bg-base-100 shadow-xl h-full min-w-0"
       data-testid="route-card"
       data-route-label={`${route.from_label} → ${route.to_label}`}
     >