Fix/mobile

packages/relay/src/views/dashboard/client-script.ts

@@ -124,11 +124,11 @@ export const dashboardClientScript = /* js */ `
       }
 
       let html = '<table class="matrix"><thead><tr><th class="corner" scope="col"></th>'
-      for (const c of CHAINS) html += '<th scope="col">' + c.label + '</th>'
+      for (const c of CHAINS) html += '<th scope="col" title="' + c.label + '">' + c.symbol + '</th>'
       html += '</tr></thead><tbody>'
 
       for (const row of CHAINS) {
-        html += '<tr><th scope="row">' + row.label + '</th>'
+        html += '<tr><th scope="row" title="' + row.label + '">' + row.symbol + '</th>'
         for (const col of CHAINS) {
           const r = lookup.get(row.caip2 + '|' + col.caip2)
           const sameChain = row.caip2 === col.caip2

packages/relay/src/views/dashboard/components.tsx

@@ -87,7 +87,7 @@ interface LoadingSlotProps {
 
 // Reserved container that the client script hydrates on first poll.
 export const LoadingSlot = ({ id, message = 'Loading…' }: LoadingSlotProps) => (
-  <div id={id}>
+  <div id={id} class="slot">
     <p class="loading">{message}</p>
   </div>
 )

packages/relay/src/views/dashboard/config.ts

@@ -2,20 +2,21 @@ export interface ChainConfig {
   slug: string
   caip2: string
   label: string
+  symbol: string
 }
 
 // Ordered alphabetically on purpose — the per-chain grid renders with equal
 // visual weight regardless of volume.
 export const CHAINS: ChainConfig[] = [
-  { slug: 'arbitrum', caip2: 'eip155:42161', label: 'Arbitrum' },
-  { slug: 'base', caip2: 'eip155:8453', label: 'Base' },
-  { slug: 'ethereum', caip2: 'eip155:1', label: 'Ethereum' },
-  { slug: 'linea', caip2: 'eip155:59144', label: 'Linea' },
-  { slug: 'optimism', caip2: 'eip155:10', label: 'Optimism' },
-  { slug: 'solana', caip2: 'solana:mainnet', label: 'Solana' },
-  { slug: 'stellar', caip2: 'stellar:pubnet', label: 'Stellar' },
-  { slug: 'unichain', caip2: 'eip155:130', label: 'Unichain' },
-  { slug: 'worldchain', caip2: 'eip155:480', label: 'World Chain' },
+  { slug: 'arbitrum', caip2: 'eip155:42161', label: 'Arbitrum', symbol: 'ARB' },
+  { slug: 'base', caip2: 'eip155:8453', label: 'Base', symbol: 'BASE' },
+  { slug: 'ethereum', caip2: 'eip155:1', label: 'Ethereum', symbol: 'ETH' },
+  { slug: 'linea', caip2: 'eip155:59144', label: 'Linea', symbol: 'LIN' },
+  { slug: 'optimism', caip2: 'eip155:10', label: 'Optimism', symbol: 'OP' },
+  { slug: 'solana', caip2: 'solana:mainnet', label: 'Solana', symbol: 'SOL' },
+  { slug: 'stellar', caip2: 'stellar:pubnet', label: 'Stellar', symbol: 'XLM' },
+  { slug: 'unichain', caip2: 'eip155:130', label: 'Unichain', symbol: 'UNI' },
+  { slug: 'worldchain', caip2: 'eip155:480', label: 'World Chain', symbol: 'WLD' },
 ]
 
 export const EXPLORERS: Record<string, string> = {

packages/relay/src/views/dashboard/page.tsx

@@ -1,5 +1,6 @@
 import { Layout } from '../layout'
 import { Nav } from '../nav'
+import { TestnetBanner } from '../testnet-banner'
 import { dashboardStyles } from './styles'
 import { dashboardClientScript } from './client-script'
 import { CHAINS, EXPLORERS } from './config'
@@ -15,6 +16,7 @@ export const DashboardPage = () => (
     description="Live activity for the 402md facilitator: chains, cross-chain routes, resources, sellers, transactions."
     extraStyles={dashboardStyles}
   >
+    <TestnetBanner />
     <Nav current="dashboard" />
 
     <main class="dashboard container">

packages/relay/src/views/dashboard/styles.ts

@@ -2,6 +2,16 @@ export const dashboardStyles = /* css */ `
   main.dashboard {
     padding-top: var(--space-xl);
     padding-bottom: var(--space-2xl);
+    min-width: 0;
+  }
+
+  /* Reserved slots hydrated by the client script. Wrap their content so tables
+     or panels that exceed the viewport scroll inside the slot instead of pushing
+     the whole page. */
+  .slot {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
   }
 
   /* ── Section rhythm ──
@@ -428,7 +438,8 @@ export const dashboardStyles = /* css */ `
     .snapshot {
       grid-template-columns: 1fr;
     }
-    .stat {
+    .stat,
+    .stat + .stat {
       padding: var(--space-md) 0;
       border-right: 0;
       border-bottom: 1px solid var(--border);