From 3e158e780b287f2b29fd86c772300579be99156e Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@MiniMax.com>
Date: Wed, 3 Jun 2026 16:31:01 +0800
Subject: [PATCH] fix(portal): prevent .hint description from being covered by
 <input>

5 .hint spans (ADMIN TOKEN / PACK PATH / PROVIDER ID / SMOKE TEST MODEL /
COMMIT MESSAGE) were being visually overlapped by their sibling <input>
boxes because:
  - .hint was inline, padding 10px 12px with background+border
  - <input> was inline-block
  - label was display:block, font-size 12px
  - the inline .hint box was being squeezed into the same flow line as the
    input, so its last 8-10px were covered

Verified via getBoundingClientRect + elementFromPoint probe before fix:
  hint.top < input.bottom (5 fields) = hint overlapped by input

Fix: force .hint to display:block with margin-top:6px so it always sits
below its input as a separate block; also force label > input/select/textarea
to display:block width:100% so the form field always stretches and never
inlines with the field label text.

Verified after fix: 0 hints overlapped on providers.html (the worst case
with 8 .hint spans).

CSS-only change; no HTML edits. Affects all 8 portal pages. Smoke +
frontend assets tests still PASS.
---
 deploy/tksea-portal/portal.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/deploy/tksea-portal/portal.css b/deploy/tksea-portal/portal.css
index 03f747c7..c269c8d6 100644
--- a/deploy/tksea-portal/portal.css
+++ b/deploy/tksea-portal/portal.css
@@ -984,7 +984,17 @@ pre code { color: inherit; }
 .cta-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 700; font-size: 13px; text-decoration: none; }
 .cta-link:hover { color: var(--teal-400); text-decoration: underline; }
 .footer-note { font-size: 12px; color: var(--text-muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
-.hint { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); }
+/* .hint sits inside a <label> AFTER the <input>. Force it to its own block
+   below the input — otherwise the inline hint box overlaps the input and
+   the last line gets covered. Also clear the margin on the first <input>
+   inside a label so it hugs the field label text. */
+.hint { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); margin-top: 6px; }
+label:not(.field-label):not(.raw-input) > input,
+label:not(.field-label):not(.raw-input) > select,
+label:not(.field-label):not(.raw-input) > textarea { display: block; width: 100%; margin-top: 4px; }
+label:not(.field-label):not(.raw-input) > .hint + input,
+label:not(.field-label):not(.raw-input) > .hint + select,
+label:not(.field-label):not(.raw-input) > .hint + textarea { margin-top: 6px; }
 .subtle, .muted-block { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
 .muted-block { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); }
 .row-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }