From 8b5ce4dcb5e311287a06ffb82be3c9bba77fe25e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 7 Mar 2022 18:24:17 +0000
Subject: [PATCH] Fix mobile layout on beta

---
 beta/src/components/Layout/Page.tsx            | 2 +-
 beta/src/components/Layout/Sidebar/Sidebar.tsx | 2 +-
 beta/src/components/SocialBanner.tsx           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
index f735b29a8..aee0448e8 100644
--- a/beta/src/components/Layout/Page.tsx
+++ b/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>
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx
index f3dab4bc9..8a325a2cb 100644
--- a/beta/src/components/Layout/Sidebar/Sidebar.tsx
+++ b/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
diff --git a/beta/src/components/SocialBanner.tsx b/beta/src/components/SocialBanner.tsx
index 18b4e870b..19b3480ec 100644
--- a/beta/src/components/SocialBanner.tsx
+++ b/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"