mikasaco opened a new pull request, #3264: URL: https://github.com/apache/apisix-dashboard/pull/3264
fix(toc): correct scroll position for FormSection, enhance TOC scrolling accuracy - Change `block` option from `'end'` to `'start'` in TOC click handler to align target sections at the top of the viewport - Add `scroll-margin-top` via CSS to ensure section titles are fully visible below the fixed AppShell header Fixes #3263 BEFORE  AFTER  --- Please answer these questions before submitting a pull request, **or your PR will get closed**. **Why submit this pull request?** - [x] Bugfix - [ ] New feature provided - [ ] Improve performance - [ ] Backport patches > The original block: 'end' setting caused the target FormSection to align near the bottom of the viewport, which feels unintuitive and disorienting for users. In practice, this leads users to believe navigation failed—especially noticeable when clicking items like "Connection Configuration," where the section title ends up partially or fully obscured. This behavior degrades usability and can be considered a UX bug. > >This PR improves the TOC interaction by switching to block: 'start' and adding appropriate scroll-margin-top, aligning sections just below the fixed header in a way that matches user expectations. The change enhances visual clarity and makes TOC navigation feel precise and reliable. **What changes will this PR take into?** - Updated `FormSection/index.tsx`: changed `scrollIntoView({ block: 'end' })` → `block: 'start'` - Added `scroll-margin-top: calc(60px + 16px)` in `style.module.css` to account for the fixed header (`APPSHELL_HEADER_HEIGHT = 60px`) and provide comfortable spacing - No breaking changes; purely a UX correction **Related issues** fix #3263 **Checklist:** - [x] Did you explain what problem does this PR solve? Or what new features have been added? - [x] Have you added corresponding test cases? *(Note: E2E tests for scroll behavior are not currently in place; manual verification confirmed)* - [x] Have you modified the corresponding document? *(Note: It's just an optimization of UX, there's no need to modifed documentation)* - [x] Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
