Skip to content

Commit 305b9a2

Browse files
committed
Vertically center single-line AI overview text (metric-robust)
The single line sat too low under real themes (twentytwentyfive): the previous align-content:end plus a button-derived padding-bottom is sensitive to the theme's font/line-height, so it looked fine in an isolated preview but drifted low under a real theme. Switch to metric-robust vertical centering: - align-content: end -> center on .hamelp-ai-overview__input and the .hamelp-ai-overview__preview textarea mirror. - Make vertical padding symmetric (top/bottom both 0.75rem) so centering is clean regardless of button size, reverting the asymmetric padding-bottom calc back to 0.75rem. min-height, field-sizing/resize, the --hamelp-btn-size clamp, the inset button offsets, and :focus-visible-only focus are unchanged. With symmetric padding + centering the single line stays visually centered across themes; multi-line still grows top-anchored with no text under the button.
1 parent a836f72 commit 305b9a2

1 file changed

Lines changed: 17 additions & 16 deletions

File tree

src/blocks/ai-overview/style.scss

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@
7373
box-sizing: border-box;
7474
// Reserve room on the right so typed text never runs under the inset send
7575
// button (right = btn size + 1rem to clear the button plus a small gap). The
76-
// bottom padding grows with the button ((btn − 40px) + 0.75rem) so the
77-
// bottom-aligned single line keeps a consistent vertical position as the
78-
// button size changes fluidly; top/left stay 0.75rem.
79-
padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) calc(var(--hamelp-btn-size) - 40px + 0.75rem) 0.75rem;
76+
// vertical padding is SYMMETRIC (top/bottom both 0.75rem) so that, combined
77+
// with align-content: center below, the single line centers cleanly in the
78+
// content box regardless of the button size or the theme's line-height.
79+
padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem;
8080
border: 1px solid var(--hamelp-border);
8181
border-radius: var(--hamelp-radius, 3px);
8282
background: var(--hamelp-surface);
@@ -94,13 +94,13 @@
9494
min-height: calc(var(--hamelp-btn-size) + 1rem);
9595
max-height: 8lh;
9696
resize: none;
97-
// Bottom-align the single line of text within the inflated min-height so it
98-
// sits slightly lower than centre ("下寄せ"): the line's bottom gap equals
99-
// padding-bottom (0.75rem ≈ 12px), matching the left text inset for a
100-
// balanced feel, while the top gap stays larger. Once the content exceeds
101-
// min-height (multi-line), align-content has no effect, so wrapped text still
102-
// grows top-anchored as expected (no text under the inset button).
103-
align-content: end;
97+
// Vertically CENTER the single line of text within the inflated min-height.
98+
// With symmetric vertical padding above, centering is metric-robust: the line
99+
// stays visually centered independent of the theme's font/line-height (a
100+
// bottom-aligned approach drifts too low under some themes). Once the content
101+
// exceeds min-height (multi-line), align-content has no effect, so wrapped
102+
// text still grows top-anchored as expected (no text under the inset button).
103+
align-content: center;
104104
}
105105

106106
// Focus ring matches the button and the search box input (outline, 2px offset).
@@ -281,16 +281,17 @@
281281
:where(.hamelp-ai-overview__preview textarea) {
282282
flex: 1;
283283
box-sizing: border-box;
284-
// Mirror the front-end textarea padding so the inset button and the
285-
// bottom-aligned single line stay in the same place (see that rule).
286-
padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) calc(var(--hamelp-btn-size) - 40px + 0.75rem) 0.75rem;
284+
// Mirror the front-end textarea padding (symmetric vertical padding) so the
285+
// inset button and the centered single line stay in the same place (see that
286+
// rule).
287+
padding: 0.75rem calc(var(--hamelp-btn-size) + 1rem) 0.75rem 0.75rem;
287288
resize: none;
288289
field-sizing: content;
289290
// Match the front-end min-height so the inset send button clears equal gaps
290291
// on every side in the single-line state (see the front-end textarea rule).
291292
min-height: calc(var(--hamelp-btn-size) + 1rem);
292-
// Match the front-end bottom-aligned ("下寄せ") single line of text.
293-
align-content: end;
293+
// Match the front-end vertically-centered single line of text.
294+
align-content: center;
294295
}
295296

296297
:where(.hamelp-ai-overview__note) {

0 commit comments

Comments
 (0)