Merge pull request #341 from ipnet-mesh/fix/mobile-overflow-dashboard-routes

Fix horizontal overflow on Dashboard and Routes (mobile portrait)

Author: jinglemansweep

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">

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}`}
     >