From d7661a44a94b1c5c1cca22e104c44bd83135664e Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:15:18 +1200
Subject: [PATCH 1/3] fix: broken mobile styling of the library version
 redirect banner

---
 app/components/RedirectVersionBanner.tsx | 36 +++++++++++++-----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/components/RedirectVersionBanner.tsx b/app/components/RedirectVersionBanner.tsx
index 4b4a34bd..16b76a25 100644
--- a/app/components/RedirectVersionBanner.tsx
+++ b/app/components/RedirectVersionBanner.tsx
@@ -21,8 +21,8 @@ export function RedirectVersionBanner(props: {
 
   if (![latestVersion, 'latest'].includes(version) && showModal) {
     return (
-      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-full overflow-hidden">
-        <div>
+      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-3xl lg:rounded-full overflow-hidden w-[80%] lg:w-auto">
+        <p className="block">
           You are currently reading <strong>{version}</strong> docs. Redirect to{' '}
           <Link
             params={{
@@ -33,22 +33,24 @@ export function RedirectVersionBanner(props: {
             latest
           </Link>{' '}
           version?
+        </p>
+        <div className="flex gap-2 flex-col lg:flex-row items-center">
+          <Link
+            params={{
+              version: 'latest',
+            }}
+            replace
+            className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
+          >
+            Latest
+          </Link>
+          <button
+            onClick={() => setShowModal(false)}
+            className="bg-black dark:bg-white dark:text-black text-white w-full lg:w-auto py-1 px-2 rounded-md uppercase font-black text-xs"
+          >
+            Hide
+          </button>
         </div>
-        <Link
-          params={{
-            version: 'latest',
-          }}
-          replace
-          className="bg-black dark:bg-white dark:text-black text-white py-1 px-2 rounded-md uppercase font-black text-xs"
-        >
-          Latest
-        </Link>
-        <button
-          onClick={() => setShowModal(false)}
-          className="bg-black dark:bg-white dark:text-black text-white py-1 px-2 rounded-md uppercase font-black text-xs"
-        >
-          Hide
-        </button>
       </div>
     )
   }

From e3696b107d23bd6acc3c885f21c118d66f34f4c5 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:17:38 +1200
Subject: [PATCH 2/3] fix: on mobile reduce the gap between the primary
 redirect banner elements

---
 app/components/RedirectVersionBanner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/RedirectVersionBanner.tsx b/app/components/RedirectVersionBanner.tsx
index 16b76a25..afc178cd 100644
--- a/app/components/RedirectVersionBanner.tsx
+++ b/app/components/RedirectVersionBanner.tsx
@@ -21,7 +21,7 @@ export function RedirectVersionBanner(props: {
 
   if (![latestVersion, 'latest'].includes(version) && showModal) {
     return (
-      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-3xl lg:rounded-full overflow-hidden w-[80%] lg:w-auto">
+      <div className="p-4 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-xl shadow-black/20 flex items-center justify-center gap-2.5 lg:gap-4 fixed top-4 left-1/2 bottom-auto backdrop-blur-sm z-20 -translate-x-1/2 rounded-3xl lg:rounded-full overflow-hidden w-[80%] lg:w-auto">
         <p className="block">
           You are currently reading <strong>{version}</strong> docs. Redirect to{' '}
           <Link

From f4c6dfe343b64961a62e419b42b4be388a040c17 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:18:52 +1200
Subject: [PATCH 3/3] fix: follow react rules and return null

---
 app/components/RedirectVersionBanner.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/RedirectVersionBanner.tsx b/app/components/RedirectVersionBanner.tsx
index afc178cd..6ac672ea 100644
--- a/app/components/RedirectVersionBanner.tsx
+++ b/app/components/RedirectVersionBanner.tsx
@@ -54,4 +54,6 @@ export function RedirectVersionBanner(props: {
       </div>
     )
   }
+
+  return null
 }