From cbcb8290d0cfc673bbb1ef3321390e517a360a21 Mon Sep 17 00:00:00 2001
From: Samuel Enocsson <samuel.enocsson@gmail.com>
Date: Tue, 13 Oct 2026 10:34:17 +0200
Subject: [PATCH] fix(master): keep agent rows and the add-agent drawer inside
 their columns (#18)

- Move the .agent @container rule after the base .agent rules. A container
  query adds no specificity, so the earlier position always lost and rows
  kept six fixed columns, spilling Revoke buttons onto the open drawer.
- Give .drawer min-width:0 so the compose snippet scrolls inside its <pre>
  instead of widening the drawer past the viewport at 390px.

Claude-Session: https://claude.ai/code/session_01GAZsp3P7Qto6JnhipxWUJQ
---
 internal/master/web/static/app.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/internal/master/web/static/app.css b/internal/master/web/static/app.css
index 8cc5f8f..b877aae 100644
--- a/internal/master/web/static/app.css
+++ b/internal/master/web/static/app.css
@@ -36,9 +36,6 @@ button,input{font-family:inherit}
 .sfoot form{margin:0}
 .work{flex:999 1 640px;min-width:0;display:flex;flex-wrap:wrap}
 .main{flex:999 1 520px;min-width:0;padding:28px 36px 48px;container-type:inline-size}
-@container (max-width:760px){
-  .agent{grid-template-columns:1fr auto;grid-template-areas:"id st" "ver mgr" "last act";row-gap:10px}
-}
 .sprite{position:absolute;width:0;height:0;overflow:hidden}
 
 /* Page header, buttons */
@@ -137,12 +134,16 @@ summary.btn::-webkit-details-marker{display:none}
 .agent .st i{width:8px;height:8px;border-radius:50%;background:currentColor}
 .a-on{color:var(--green)}.a-off{color:var(--red)}.a-never,.a-revoked{color:var(--dim)}
 .a-off i,.a-never i{background:transparent !important;box-shadow:inset 0 0 0 1.5px currentColor}
+/* After the .agent rules: a container query adds no specificity, so it must come later to win. */
+@container (max-width:760px){
+  .agent{grid-template-columns:1fr auto;grid-template-areas:"id st" "ver mgr" "last act";row-gap:10px}
+}
 .pop{position:absolute;right:6px;top:calc(100% - 8px);z-index:5;width:360px;padding:14px 16px;border-radius:8px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;color:var(--mut)}
 .pop::before{content:"";position:absolute;top:-6px;right:30px;width:10px;height:10px;background:var(--card);border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg)}
 .pop h4{margin:0 0 4px;font:700 14px var(--sans);color:var(--fg)}
 .pop p{margin:0 0 12px}
 .pop .acts{display:flex;gap:8px;justify-content:flex-end;margin:0}
-.drawer{flex:1 1 440px;max-width:520px;border-left:1px solid var(--line2);background:var(--card);padding:28px 28px 40px;display:flex;flex-direction:column;gap:18px}
+.drawer{flex:1 1 440px;min-width:0;max-width:520px;border-left:1px solid var(--line2);background:var(--card);padding:28px 28px 40px;display:flex;flex-direction:column;gap:18px}
 .dh{display:flex;align-items:center;gap:12px}
 .dh h2{margin:0;font:700 20px var(--sans);letter-spacing:-.015em}
 .dh .x{margin-left:auto}