From 3575af1f7e9d9bb0493ee7bb772c3003d92cc519 Mon Sep 17 00:00:00 2001
From: Louis King <jinglemansweep@gmail.com>
Date: Fri, 24 Jul 2026 23:38:01 +0100
Subject: [PATCH] fix(web): clip Routes card overflow with overflow-hidden on
 card-body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous min-w-0 on the card grid item prevented the card from growing
but did not clip content that overflowed the card boundary (Chart.js
canvas, flex items with min-width:auto inside card-body). The overflow
was still visible beyond the card edge, causing page-level scroll.

Add overflow-hidden to card-body — this both resolves card-body's own
min-width:auto to 0 (per CSS spec, overflow != visible on a flex/grid
item zeroes its automatic minimum size) and clips any residual content
overflow from children. Add overflow-x-hidden to the page root as a
safety net for any non-card overflow.
---
 src/meshcore_hub/web/static/js/spa-react/pages/Routes.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 3bcfb40..e44187b 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
@@ -546,7 +546,7 @@ function RouteCard({
       data-testid="route-card"
       data-route-label={`${route.from_label} → ${route.to_label}`}
     >
-      <div className="card-body">
+      <div className="card-body overflow-hidden">
         <div className="flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">
             <h2 className="card-title">
@@ -1500,7 +1500,7 @@ export function RoutesPage() {
   }
 
   return (
-    <div>
+    <div className="overflow-x-hidden">
       <PageHeader title={t("entities.routes")} icon={IconPath} />
 
       <SummaryStrip routes={routes} />