[Beta] Top bar fixes (#5025)

beta/src/components/Layout/Page.tsx

@@ -37,10 +37,12 @@ export function Page({children, toc}: PageProps) {
       <SocialBanner />
       <SidebarContext.Provider value={routeTree}>
         <div className="h-auto flex flex-col lg:flex-row">
-          <div className="sticky top-0 py-0 lg:w-80 flex-none lg:static shadow lg:shadow-none z-50">
+          <div className="fixed lg:sticky top-0 left-0 right-0 py-0 lg:w-80 flex-none lg:static shadow lg:shadow-none z-50">
             <Nav />
           </div>
 
+          <div className="lg:hidden h-16 mb-2" />
+
           {/* No fallback UI so need to be careful not to suspend directly inside. */}
           <React.Suspense fallback={null}>
             <div className="flex flex-1 w-full h-full self-stretch min-w-0">

beta/src/components/SocialBanner.tsx

@@ -4,40 +4,37 @@
  */
 
 import React from 'react';
+import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-// TODO: Unify with the old site settings.
 const bannerText = 'Support Ukraine 🇺🇦';
 const bannerLink = 'https://opensource.fb.com/support-ukraine';
 const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
 
-// Keep these synced:
-const bannerHeightJs = 40;
-const bannerHeightTw = 'h-[40px]';
-
-if (typeof window !== 'undefined') {
-  // Assume it's Next.js scroll restoration.
-  const realScrollTo = window.scrollTo;
-  (window as any).scrollTo = function scrollToPatchedForSocialBanner(
-    x: number,
-    y: number
-  ) {
-    if (y === 0) {
-      // We're trying to reset scroll.
-      // If we already scrolled past the banner, consider it as y = 0.
-      y = Math.min(window.scrollY, bannerHeightJs);
-    }
-    return realScrollTo(x, y);
-  };
-}
-
 export default function SocialBanner() {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  React.useEffect(() => {
+    function patchedScrollTo(x: number, y: number) {
+      if (y === 0) {
+        // We're trying to reset scroll.
+        // If we already scrolled past the banner, consider it as y = 0.
+        const bannerHeight = ref.current!.offsetHeight; // Could be zero (e.g. mobile)
+        y = Math.min(window.scrollY, bannerHeight);
+      }
+      return realScrollTo(x, y);
+    }
+    const realScrollTo = window.scrollTo;
+    (window as any).scrollTo = patchedScrollTo;
+    return () => {
+      (window as any).scrollTo = realScrollTo;
+    };
+  }, []);
   return (
     <div
-      className={
-        bannerHeightTw +
-        ` w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 flex items-center justify-center flex-col sm:flex-row z-[100]`
-      }>
+      ref={ref}
+      className={cn(
+        `h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center justify-center flex-col sm:flex-row z-[100]`
+      )}>
       <div className="hidden sm:block">{bannerText}</div>
       <ExternalLink
         className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"

beta/src/styles/index.css

@@ -218,7 +218,7 @@ html.dark .code-step * {
 }
 
 .mdx-heading {
-  scroll-margin-top: 3em;
+  scroll-margin-top: 3.5em;
   /* Space for the anchor */
   padding-right: 1em;
 }