adam/meshcore-hub
1
0
Fork 0
mirror of https://github.com/ipnet-mesh/meshcore-hub.git synced 2026-08-06 17:02:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): resolve horizontal overflow on Dashboard and Routes (mobile)

Browse Source 
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.
This commit is contained in:
Louis King
2026-07-24 23:21:00 +01:00
parent d13695eecf
commit 471830de8f
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/meshcore_hub/web/static/js/spa-react/pages/Dashboard.tsx
+4 -4
View File
@@ -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
+5 -5
View File
@@ -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}`}
>