From 1efa1bc92998fb2a77bd06103ad53a541e44cb7e Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Tue, 10 Mar 2026 12:11:34 -0500
Subject: [PATCH] fix(site): fix legacy banner layout on narrow viewports
 (#856)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 site/src/components/LegacyBanner.astro | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/src/components/LegacyBanner.astro b/site/src/components/LegacyBanner.astro
index 46750289..87ba6af9 100644
--- a/site/src/components/LegacyBanner.astro
+++ b/site/src/components/LegacyBanner.astro
@@ -6,16 +6,16 @@ import { BANNER_DISMISS_KEY } from '@/consts';
   data-legacy-banner
   class:list={[
     "banner-dismissed:hidden",
-    "flex items-center justify-center gap-2 px-5 py-2 text-p3 md:text-p2",
+    "relative py-2 text-p3 md:text-p2",
     "border-b border-manila-75 bg-manila-50 text-faded-black",
     "dark:border-soot dark:bg-warm-gray dark:text-manila-light",
   ]}
 >
-  <p>
+  <p class="px-12 text-center">
     Using Video.js v8 or earlier?{" "}
     <a
       href="https://legacy.videojs.org"
-      class="font-bold underline intent:no-underline"
+      class="font-bold whitespace-nowrap underline intent:no-underline"
     >
       Visit legacy.videojs.org
     </a>
@@ -25,6 +25,7 @@ import { BANNER_DISMISS_KEY } from '@/consts';
     data-legacy-banner-dismiss
     aria-label="Dismiss banner"
     class:list={[
+      "absolute top-1/2 right-2 -translate-y-1/2",
       "shrink-0 cursor-pointer rounded p-2 intent:bg-manila-light dark:intent:bg-faded-black",
     ]}
   >