From 30050f7a65d4d765ce8b0efd64dbab373acaae0c Mon Sep 17 00:00:00 2001 From: gilesb Date: Wed, 7 Jan 2026 14:20:38 +0000 Subject: [PATCH] style: left-justify layout, increase text sizes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Runs/cards max-width 900px, left-aligned - Media boxes left-justified, max 400px each - Increased font sizes throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- server.py | 49 +++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/server.py b/server.py index ef15f0b..c1d38bb 100644 --- a/server.py +++ b/server.py @@ -381,56 +381,57 @@ UI_CSS = """ * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; - margin: 0; padding: 20px; + margin: 0; padding: 24px; background: #111; color: #eee; + font-size: 16px; } - h1 { margin: 0 0 20px 0; color: #fff; } - h2 { color: #ccc; margin: 24px 0 12px 0; font-size: 16px; } + h1 { margin: 0 0 24px 0; color: #fff; font-size: 28px; } + h2 { color: #ccc; margin: 24px 0 12px 0; font-size: 20px; } a { color: #60a5fa; text-decoration: none; } a:hover { color: #93c5fd; text-decoration: underline; } - .runs { display: flex; flex-direction: column; gap: 12px; } + .runs { display: flex; flex-direction: column; gap: 16px; max-width: 900px; } .run { - background: #222; border-radius: 8px; padding: 16px; + background: #222; border-radius: 8px; padding: 20px; border: 1px solid #333; } - .run-link { display: block; text-decoration: none; color: inherit; } + .run-link { display: block; text-decoration: none; color: inherit; max-width: 900px; } .run-link:hover .run { border-color: #555; background: #282828; } - .run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } - .run-id { font-family: monospace; font-size: 12px; color: #888; } - .run-recipe { font-weight: bold; font-size: 18px; color: #fff; } + .run-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } + .run-id { font-family: monospace; font-size: 14px; color: #888; margin-left: 12px; } + .run-recipe { font-weight: bold; font-size: 22px; color: #fff; } .status { - padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; + padding: 6px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; } .status.completed { background: #1a4d1a; color: #4ade80; } .status.running { background: #4d4d1a; color: #facc15; } .status.failed { background: #4d1a1a; color: #f87171; } .status.pending { background: #333; color: #888; } - .media-row { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; } - .media-box { flex: 1; min-width: 200px; } - .media-box label { font-size: 11px; color: #666; display: block; margin-bottom: 4px; } + .media-row { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; justify-content: flex-start; } + .media-box { flex: 0 1 auto; min-width: 200px; max-width: 400px; } + .media-box label { font-size: 13px; color: #888; display: block; margin-bottom: 6px; } .media-container { } .media-container img, .media-container video { max-width: 100%; max-height: 300px; border-radius: 4px; } @media (max-width: 600px) { .media-row { flex-direction: column; } - .media-box { min-width: 100%; } + .media-box { min-width: 100%; max-width: 100%; } } - .hash { font-family: monospace; font-size: 11px; color: #666; } + .hash { font-family: monospace; font-size: 13px; color: #666; } .hash a { color: #888; } .hash a:hover { color: #60a5fa; } - .info { font-size: 13px; color: #aaa; } + .info { font-size: 15px; color: #aaa; } .refresh-btn, .back-btn { - background: #333; color: #fff; border: none; padding: 8px 16px; - border-radius: 4px; cursor: pointer; margin-bottom: 16px; - text-decoration: none; display: inline-block; + background: #333; color: #fff; border: none; padding: 10px 20px; + border-radius: 4px; cursor: pointer; margin-bottom: 20px; + text-decoration: none; display: inline-block; font-size: 15px; } .refresh-btn:hover, .back-btn:hover { background: #444; } - .no-runs { color: #666; font-style: italic; } - .provenance { background: #1a1a1a; border-radius: 8px; padding: 16px; margin-top: 16px; } - .prov-item { margin: 8px 0; } - .prov-label { color: #888; font-size: 12px; } - .prov-value { font-family: monospace; font-size: 13px; } + .no-runs { color: #666; font-style: italic; font-size: 16px; } + .provenance { background: #1a1a1a; border-radius: 8px; padding: 20px; margin-top: 20px; max-width: 700px; } + .prov-item { margin: 12px 0; } + .prov-label { color: #888; font-size: 14px; margin-bottom: 4px; } + .prov-value { font-family: monospace; font-size: 15px; word-break: break-all; } code { background: #222; padding: 2px 6px; border-radius: 4px; } """