niuniu/sub2api-cn-relay-manager
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(portal): prevent .hint description from being covered by <input>
Some checks failed
CI / Build & Test (push) Has been cancelled
Details
CI / Lint (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Release (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
Hermes Agent
2026-06-03 16:31:01 +08:00
parent 86412192fd
commit 3e158e780b
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
deploy/tksea-portal/portal.css
View File

@@ -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; }