From e44bf2b3c9621ee830a576dd9d5c33d32d8cab25 Mon Sep 17 00:00:00 2001 From: dev Date: Sun, 7 Jun 2026 14:02:11 -0500 Subject: [PATCH] style(ui): make docked dialog look more like a Torn panel (full-width, accent border) Previously the .tat-root.tat-anchored rule centered the dialog with a 720px max-width and no extra border, which made it look like a floating widget squeezed into the page rather than an embedded panel. The Torn gym page reference is a full-width panel with a thin dark border and a red top accent line. Changes: - margin: 0 0 12px 0 (full-width, no centering) - max-width: none (span the content area) - border-radius: 0 (Torn panels are flat, not rounded) - border: 1px solid #444 with border-top: 2px solid #c00 (red accent) - padding: 16px 20px (more breathing room, matching Torn panels) - .tat-root.tat-anchored .tat-header { cursor: default } (drag is disabled in anchored mode, so the move cursor was misleading) Free-floating mode is unchanged: the .tat-root base rule keeps its rounded shadowed look and .tat-header keeps cursor: move. Mirrored into the embedded TAT_STYLE in the bundle to keep the source and bundle in lockstep. Co-Authored-By: Claude Opus 4.8 --- src/ui.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/ui.js b/src/ui.js index 9d010bf..b545fe7 100644 --- a/src/ui.js +++ b/src/ui.js @@ -10,10 +10,15 @@ const STYLE = ` } .tat-root.tat-anchored { position: static; - margin: 0 auto 12px; - max-width: 720px; + margin: 0 0 12px 0; + max-width: none; box-shadow: none; + border-radius: 0; + border: 1px solid #444; + border-top: 2px solid #c00; + padding: 16px 20px; } +.tat-root.tat-anchored .tat-header { cursor: default; } .tat-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; margin-bottom: 10px;