enhance toc scrolling accuracy (#3264)

fix(toc): correct scroll position for FormSection, enhance toc scrolling accuracy

- change block from 'end' to 'start' in TOC click handler
- add scroll-margin-top in css

Fixes #3263

Author: mikasaco

src/components/form-slice/FormSection/index.tsx

@@ -130,7 +130,7 @@ const TOC = (props: Pick<TableOfContentsProps, 'reinitializeRef'>) => {
         onClick: () => {
           return data.getNode().scrollIntoView({
             behavior: 'smooth',
-            block: 'end',
+            block: 'start',
             inline: 'end',
           });
         },

src/components/form-slice/FormSection/style.module.css

@@ -1,5 +1,6 @@
 .root {
   margin-block: var(--mantine-font-size-md, 0);
+  scroll-margin-top: calc(var(--appshell-header-height, 60px) + 20px);
 
   & > fieldset {
     margin-bottom: 0;