fix: prevent mobile dashboard overflow

apps/web/src/App.tsx

@@ -708,14 +708,14 @@ function Dashboard() {
       </div>
 
       <div className="mt-6 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
-        <Card>
+        <Card className="min-w-0">
           <CardHeader>
             <CardTitle>Usage metrics</CardTitle>
             <CardDescription>
               CodexDash extracts numeric leaf nodes from the aggregated usage payload for quick overview cards.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent className="min-w-0">
             {metricCards.length === 0 ? (
               <div className="rounded-2xl border border-dashed border-white/10 bg-white/3 p-6 text-sm text-slate-400">
                 No usage data yet. Connect an OpenAI account and complete the sign-in flow to start refreshing.
@@ -725,9 +725,9 @@ function Dashboard() {
                 {metricCards.map((metric) => (
                   <div
                     key={metric.label}
-                    className="rounded-2xl border border-white/10 bg-white/4 p-4"
+                    className="min-w-0 rounded-2xl border border-white/10 bg-white/4 p-4"
                   >
-                    <div className="text-sm text-slate-400">
+                    <div className="text-sm text-slate-400 break-words">
                       {titleizeMetric(metric.label)}
                     </div>
                     <div className="mt-3 text-2xl font-semibold text-white">

apps/web/src/components/json-viewer.tsx

@@ -2,15 +2,17 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 
 export function JsonViewer({ title, description, value }: { title: string; description: string; value: unknown }) {
   return (
-    <Card className="border-white/8 bg-slate-900/80">
+    <Card className="min-w-0 border-white/8 bg-slate-900/80">
       <CardHeader>
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
       </CardHeader>
-      <CardContent>
-        <pre className="max-h-80 overflow-auto rounded-2xl bg-black/30 p-4 text-xs leading-6 text-slate-300">
-          {JSON.stringify(value, null, 2)}
-        </pre>
+      <CardContent className="min-w-0">
+        <div className="min-w-0 max-h-80 overflow-x-auto overflow-y-auto rounded-2xl bg-black/30">
+          <pre className="min-w-0 whitespace-pre-wrap break-all p-4 text-xs leading-6 text-slate-300">
+            {JSON.stringify(value, null, 2)}
+          </pre>
+        </div>
       </CardContent>
     </Card>
   );