fix(anchor-overscrolls): update css to fix anchor overscroll in main content

packages/docs/composables/useDocsScroll.ts

@@ -6,17 +6,12 @@ export const useDocsScroll = () => {
     const pageContent = document.querySelector('.docs-layout__main-content')
 
     if (pageContent) {
-      pageContent.scrollTop = 0
+      pageContent.scrollIntoView(true);
     }
   }
 
   const scrollToElement = () => {
-    if (route.hash) {
-      if (typeof document === 'undefined') { return }
-      const el = document.querySelector(route.hash)
-
-      el?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
-    } else {
+    if (!route.hash) {
       scrollTop()
     }
   }

packages/docs/layouts/default.vue

@@ -119,8 +119,6 @@ html {
     display: flex;
     justify-content: center;
     background: var(--va-background-primary);
-
-    // @include va-scroll(var(--va-primary));
   }
 
   &__page-content {

packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue

@@ -48,11 +48,11 @@ export default defineComponent({
   opacity: 0;
   font-size: 95%;
   transition: opacity 0.1s ease-in-out;
-  
+
   &:focus {
     opacity: 1;
   }
-  
+
   &--force-show {
     opacity: 1;
   }

packages/docs/page-config/ui-elements/avatar/index.ts

@@ -11,7 +11,8 @@ export default definePageConfig({
     block.subtitle("Examples"),
 
     block.example("Default", {
-      title: 'By default `va-avatar` is displayed as a circle container.'
+      title: 'Default',
+      description: 'By default `va-avatar` is displayed as a circle container.'
     }),
 
     block.example("WithImage", {

packages/ui/src/components/va-layout/VaLayout.vue

@@ -53,7 +53,7 @@ export default defineComponent({
   components: { VaLayoutArea },
 
   setup (props, { slots }) {
-    useLayout(props)
+    const { paddings } = useLayout(props)
 
     const doDisableScroll = computed(() => {
       return !props.allowBodyScrollOnOverlay && areaNames.some((area) => props[area]?.overlay)
@@ -94,6 +94,7 @@ export default defineComponent({
           .filter(Boolean)
           .join(' ')
       }),
+      paddings,
     }
   },
 })
@@ -123,6 +124,14 @@ export default defineComponent({
       // Make it possible for content to be smaller than the layout
       min-width: 0;
       min-height: 0;
+
+      // When scroll anchor is present in content, there might be overflow, so we add scroll margins
+      [id] {
+        scroll-margin-top: calc(v-bind("paddings.top + 'px'") + var(--va-layout-scroll-padding));
+        scroll-margin-bottom: calc(v-bind("paddings.bottom + 'px'") + var(--va-layout-scroll-padding));
+        scroll-margin-left: calc(v-bind("paddings.left + 'px'") + var(--va-layout-scroll-padding));
+        scroll-margin-right: calc(v-bind("paddings.right + 'px'") + var(--va-layout-scroll-padding));
+      }
     }
   }
 }

packages/ui/src/components/va-layout/_variables.scss

@@ -1,4 +1,5 @@
 :root,
 :host {
   --va-layout-overlay-color: rgba(0, 0, 0, 0.5);
+  --va-layout-scroll-padding: 1rem;
 }

packages/ui/src/components/va-layout/hooks/useLayout.ts

@@ -74,6 +74,12 @@ export const useLayout = (props: ExtractPropTypes<typeof useLayoutProps>) => {
     paddings,
     orders,
   })
+
+  return {
+    paddings,
+    orders,
+    items,
+  }
 }
 
 export const useFixedLayoutChild = (area: AreaName, sizes: Ref<DOMRectReadOnly | null>) => {