docs: improve layout

Author: mrholek

packages/docs/src/styles/_scrolling.scss

@@ -6,8 +6,19 @@ main {
   h2,
   h3,
   h4,
-  [tabindex="0"] {
+  [tabindex='0'] {
     scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
   }
 }
+
+.component-sub-nav-wrapper + .container-lg .docs-main {
+  a,
+  button,
+  h2,
+  h3,
+  h4,
+  [tabindex='0'] {
+    scroll-margin-top: 130px;
+  }
+}

packages/docs/src/templates/DocsLayout.tsx

@@ -58,7 +58,7 @@ const humanize = (text: string): string => {
     .join(' ')
 }
 
-const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext, path }) => {
+const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext, path }) => {
   const docsNavRef = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLDivElement>(null)
   const [docsNavHeight, setDocsNavHeigh] = useState<number>(0)
@@ -131,7 +131,7 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, pageContext, path })
                 )}
                 <Banner pro={proComponent} />
                 <p className="docs-lead">{description}</p>
-                <Ads code="CEAICKJY" location={route} placement="coreuiio" />
+                <Ads code="CEAICKJY" location={location.pathname} placement="coreuiio" />
                 {frameworks.length > 0 && (
                   <>
                     <h2>Other Frameworks</h2>