Fix mobile layout on beta

beta/src/components/Layout/Page.tsx

@@ -28,7 +28,7 @@ export function Page({routeTree, children}: PageProps) {
 
             <div className="flex flex-1 w-full h-full self-stretch">
               <div className="w-full min-w-0">
-                <main className="flex flex-1 self-stretch mt-10 flex-col items-end justify-around">
+                <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
                   {children}
                   <Footer />
                 </main>

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -31,7 +31,7 @@ export function Sidebar() {
         isOpen ? 'block z-40' : 'hidden lg:block'
       )}
       aria-hidden={isHidden}>
-      <div className="px-5">
+      <div className="px-5 pt-16 sm:pt-10 lg:pt-0">
         <Search />
       </div>
       <nav

beta/src/components/SocialBanner.tsx

@@ -14,7 +14,7 @@ const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine.';
 
 export default function SocialBanner() {
   return (
-    <div className="w-full bg-gray-100 dark:bg-gray-700 fixed py-2 h-16 sm:h-10 sm:py-0 flex items-center justify-center flex-col sm:flex-row z-50">
+    <div className="w-full bg-gray-100 dark:bg-gray-700 fixed py-2 h-16 sm:h-10 sm:py-0 flex items-center justify-center flex-col sm:flex-row z-[100]">
       {bannerText}
       <ExternalLink
         className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"