From 7a179728793b9ec490ca3e8cb9ba22e1ec582232 Mon Sep 17 00:00:00 2001 From: falkoro <39274208+falkoro@users.noreply.github.com> Date: Sun, 31 May 2026 18:20:49 +0200 Subject: [PATCH] fix: float compact-row action buttons on hover instead of crowding the line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Restart/Pull icons were sharing the top line with the name + cpu/mem and crowding/wrapping at narrow sidebar widths. Now on the compact remote rows they're absolutely positioned at the right and revealed on hover/focus (in a small backdrop chip), so the row stays clean (name · cpu/mem / description · age) and the buttons take no permanent space. Touch devices (no hover) keep them in flow on their own line. Verified at a narrow width: rows uncramped, buttons reveal on hover (↻ ⬇). Co-Authored-By: Claude Opus 4.8 (1M context) --- public/app.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/public/app.css b/public/app.css index 9158687..5809abe 100644 --- a/public/app.css +++ b/public/app.css @@ -480,7 +480,15 @@ body.shells-locked .container-actions{display:none} .container-item.compact .ci-bot{align-items:flex-start} .container-item.compact .ci-cpu{white-space:nowrap} /* Action buttons now ride inline in the top row (saves a row); align to the right. */ -.ci-top .container-actions,.ci-row1 .container-actions{margin:0;flex:0 0 auto;margin-left:auto} +.ci-row1 .container-actions{margin:0;flex:0 0 auto;margin-left:auto} +/* Compact (remote) rows: float the action buttons at the right, revealed on hover/focus, so they + never crowd the line or wrap at narrow sidebar widths. */ +.container-item.compact{position:relative} +.container-item.compact .container-actions{position:absolute;top:50%;right:6px;transform:translateY(-50%);margin:0;opacity:0;pointer-events:none;transition:opacity .12s ease;background:rgba(5,11,17,.92);border:1px solid rgba(139,246,255,.18);border-radius:7px;padding:2px;gap:4px} +.container-item.compact:hover .container-actions,.container-item.compact:focus-within .container-actions{opacity:1;pointer-events:auto} +.container-item.compact .container-action{padding:2px 7px} +/* No hover on touch — keep the buttons in flow on their own line there. */ +@media (hover:none){.container-item.compact .container-actions{position:static;transform:none;opacity:1;pointer-events:auto;background:none;border:0;justify-content:flex-end;margin-top:3px}} .container-item .ci-row1{align-items:flex-start} /* Condensed 2-line container row for remote host cards. */ .container-item.compact{padding:6px 9px;gap:2px}