ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: page jumped to top while typing in header search — caret-visibility scrolling honours scroll-padding-top; negative scroll-margin on header inputs cancels it (suggestions re-enabled)

Browse Source
This commit is contained in:
ctao
2026-07-25 18:59:57 +02:00
parent 61f5d8444f
commit 694b7d2003
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+7
View File
@@ -108,6 +108,13 @@
* { box-sizing: border-box; } * { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; /* sticky header + anchor jumps */ } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; /* sticky header + anchor jumps */ }
/* Chrome re-scrolls the focused editable into view on EVERY keystroke and
honours scroll-padding-top while doing it. Inputs inside the sticky header
live above that 76px line by definition, so each typed character triggered
a corrective scroll-to-top. Negative scroll-margin cancels the padding for
exactly these fields (root cause, not a workaround — the padding exists for
in-content anchors, never for header chrome). */
.nav-search input, .search-pop input { scroll-margin-top: -76px; }
/* Guard, not a solution (DESIGN.md): every wide element is contained at its own /* Guard, not a solution (DESIGN.md): every wide element is contained at its own
level (tables scroll in their box, long words wrap); clip only catches level (tables scroll in their box, long words wrap); clip only catches
regressions so one offender can never remove the page gutters. `clip`, unlike regressions so one offender can never remove the page gutters. `clip`, unlike