From 952a3dabcb86cc577d9c3ecebe80c9cc8a8fd918 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 29 Jul 2026 14:57:22 +0000
Subject: [PATCH] Fix cramped result layout on narrow screens in
 github-account.html

On phones the fixed 140px label column squeezed the value column,
wrapping names and timestamps across several lines and breaking the
raw ISO date mid-token. Stack label above value under 520px, allow
long values to wrap safely, and put the raw timestamp on its own line.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M4rt82kLuZdyCr8sdo5Riv
---
 github-account.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/github-account.html b/github-account.html
index c2f7dad0..74b07c9b 100644
--- a/github-account.html
+++ b/github-account.html
@@ -65,10 +65,11 @@
     }
     button:disabled { opacity: 0.6; cursor: not-allowed; }
     .result { margin-top: 18px; padding: 16px; border-radius: 12px; background: #0b1220; border: 1px dashed rgba(148,163,184,0.25); }
-    .row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(148,163,184,0.1); }
+    .row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(148,163,184,0.1); }
     .row:last-child { border-bottom: none; }
     .label { color: var(--muted); }
-    .value { font-weight: 600; }
+    .value { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
+    .value .raw { display: block; font-weight: 400; }
     .avatar {
       width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(148,163,184,0.25);
       box-shadow: 0 6px 18px rgba(0,0,0,0.3); object-fit: cover;
@@ -83,6 +84,7 @@
     @media (max-width: 520px) {
       .lookup-row { grid-template-columns: 1fr; }
       button { width: 100%; }
+      .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
     }
   </style>
 </head>
@@ -323,7 +325,7 @@ <h1>GitHub account lookup</h1>
           </div>
           <div class="row">
             <div class="label">Created</div>
-            <div class="value">${sanitize(created)}<span class="muted"> (raw: ${sanitize(data.created_at)})</span></div>
+            <div class="value">${sanitize(created)}<span class="muted raw">raw: ${sanitize(data.created_at)}</span></div>
           </div>
           <div class="row">
             <div class="label">API Latency</div>