fix: prevent mobile dashboard overflow

apps/web/test/mobile-overflow-guards.test.js

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const appSource = readFileSync(join(import.meta.dir, '../src/App.tsx'), 'utf8');
+const jsonViewerSource = readFileSync(
+  join(import.meta.dir, '../src/components/json-viewer.tsx'),
+  'utf8',
+);
+
+describe('mobile overflow guards', () => {
+  test('usage metrics cards allow long metric labels to wrap on mobile', () => {
+    expect(appSource).toContain('className="grid gap-3 sm:grid-cols-2"');
+    expect(appSource).toContain('className="min-w-0 rounded-2xl border border-white/10 bg-white/4 p-4"');
+    expect(appSource).toContain('className="text-sm text-slate-400 break-words"');
+  });
+
+  test('merged payload viewer constrains JSON horizontally inside the card', () => {
+    expect(jsonViewerSource).toContain('className="min-w-0"');
+    expect(jsonViewerSource).toContain('overflow-x-auto');
+    expect(jsonViewerSource).toContain('whitespace-pre-wrap');
+    expect(jsonViewerSource).toContain('break-all');
+  });
+});