From 995d8a3c121a5fbfd2f37c1dbe3b5a6bf0119b72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 5 Apr 2026 15:13:16 +0100
Subject: [PATCH] feat(web): mobile-responsive pass on mesh detail + invites
 list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mesh detail page at /dashboard/meshes/[id]:
- Header: flex-col → flex-row at sm breakpoint. Live/Invite buttons
  stretch full-width stacked on mobile (flex-1), auto-width side-by-
  side from sm up.
- "Generate invite link" truncates to "Invite" on mobile (viewport
  constrained) so the button fits next to Live.
- Members + active-invites rows: stack metadata vertically on mobile
  (flex-col → sm:flex-row), wrap badges inside with flex-wrap so the
  member display-name + role + revoked badges don't horizontal-scroll.

Invites list at /dashboard/invites:
- Wrap the table in overflow-x-auto with min-w-[560px] on the table
  itself. 5-column data-table that genuinely needs horizontal space
  — don't fake it with card stacking, let the user scroll naturally.

Quick-send composer deferred to a follow-up — writes a message to the
mesh, which requires a client-side encryption decision (ed25519
keypair in the browser? key derivation from session? plaintext-to-
broker and break E2E?). Parked as its own spec.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../dashboard/(user)/invites/page.tsx         |  4 +--
 .../dashboard/(user)/meshes/[id]/page.tsx     | 33 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/app/[locale]/dashboard/(user)/invites/page.tsx b/apps/web/src/app/[locale]/dashboard/(user)/invites/page.tsx
index 90f2fe5..eb2674c 100644
--- a/apps/web/src/app/[locale]/dashboard/(user)/invites/page.tsx
+++ b/apps/web/src/app/[locale]/dashboard/(user)/invites/page.tsx
@@ -41,8 +41,8 @@ export default async function InvitesPage() {
           </p>
         </div>
       ) : (
-        <div className="rounded-lg border">
-          <table className="w-full text-sm">
+        <div className="overflow-x-auto rounded-lg border">
+          <table className="w-full min-w-[560px] text-sm">
             <thead className="text-muted-foreground border-b text-left text-xs uppercase">
               <tr>
                 <th className="px-4 py-3 font-medium">Mesh</th>
diff --git a/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/page.tsx b/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/page.tsx
index 34f37b0..6016256 100644
--- a/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/page.tsx
+++ b/apps/web/src/app/[locale]/dashboard/(user)/meshes/[id]/page.tsx
@@ -40,11 +40,11 @@ export default async function MeshPage({
   return (
     <>
       <DashboardHeader>
-        <div className="flex w-full items-start justify-between gap-4">
-          <div>
+        <div className="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 flex-1">
             <DashboardHeaderTitle>
-              <span className="flex items-center gap-3">
-                {mesh.name}
+              <span className="flex flex-wrap items-center gap-2 sm:gap-3">
+                <span className="truncate">{mesh.name}</span>
                 <Badge variant="outline" className="font-mono text-xs">
                   {mesh.slug}
                 </Badge>
@@ -55,19 +55,26 @@ export default async function MeshPage({
               · tier {mesh.tier} · {mesh.visibility} · {mesh.transport}
             </DashboardHeaderDescription>
           </div>
-          <div className="flex gap-2">
+          <div className="flex w-full gap-2 sm:w-auto">
             <Link
               href={pathsConfig.dashboard.user.meshes.live(mesh.id)}
-              className={buttonVariants({ variant: "outline" })}
+              className={buttonVariants({
+                variant: "outline",
+                className: "flex-1 sm:flex-initial",
+              })}
             >
               <span className="mr-1.5 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--cm-clay)]" />
               Live
             </Link>
             <Link
               href={pathsConfig.dashboard.user.meshes.invite(mesh.id)}
-              className={buttonVariants({ variant: "default" })}
+              className={buttonVariants({
+                variant: "default",
+                className: "flex-1 sm:flex-initial",
+              })}
             >
-              Generate invite link
+              <span className="hidden sm:inline">Generate invite link</span>
+              <span className="sm:hidden">Invite</span>
             </Link>
           </div>
         </div>
@@ -90,9 +97,9 @@ export default async function MeshPage({
               {members.map((m) => (
                 <div
                   key={m.id}
-                  className="flex items-center justify-between px-4 py-3"
+                  className="flex flex-col gap-1.5 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
                 >
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                     <span className="font-medium">
                       {m.displayName}
                       {m.isMe && (
@@ -140,16 +147,16 @@ export default async function MeshPage({
               {activeInvites.map((inv) => (
                 <div
                   key={inv.id}
-                  className="flex items-center justify-between px-4 py-3 text-sm"
+                  className="flex flex-col gap-1.5 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-3"
                 >
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                     <code className="bg-muted rounded px-2 py-0.5 text-xs">
                       {inv.token.slice(0, 12)}…
                     </code>
                     <Badge variant="outline" className="text-xs">
                       {inv.role}
                     </Badge>
-                    <span className="text-muted-foreground">
+                    <span className="text-muted-foreground text-xs">
                       {inv.usedCount} / {inv.maxUses} used
                     </span>
                   </div>