From 0b9bb56d5e6cb4d90243cb6d374e911891ca7e89 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Wed, 22 Oct 2025 16:31:42 -0700
Subject: [PATCH] fix(website): mobile optimizations

---
 website/src/components/NavBar/MobileNav.tsx      | 10 +++++-----
 website/src/components/ToggleGroup.tsx           |  6 ++++--
 website/src/components/home/HomePageControls.tsx |  5 ++++-
 website/src/components/typography/H6.astro       |  2 +-
 website/src/pages/index.astro                    |  2 +-
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/website/src/components/NavBar/MobileNav.tsx b/website/src/components/NavBar/MobileNav.tsx
index f738a232..18b5ab70 100644
--- a/website/src/components/NavBar/MobileNav.tsx
+++ b/website/src/components/NavBar/MobileNav.tsx
@@ -22,7 +22,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
     <Dialog.Root modal>
       {/* Trigger button - hamburger menu */}
       <Dialog.Trigger
-        className={clsx('sm:hidden flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 text-light-80 intent:bg-dark-80')}
+        className={clsx('sm:hidden flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 dark:bg-light-80 text-light-80 dark:text-dark-100 intent:bg-dark-80 dark:intent:bg-light-40')}
         aria-label="Open navigation menu"
       >
         <Menu size={24} />
@@ -31,24 +31,24 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
       {/* Portal renders outside DOM hierarchy */}
       <Dialog.Portal>
         {/* Popup container */}
-        <Dialog.Popup className={clsx('fixed inset-0 z-50 flex flex-col', dark ? 'bg-dark-100 text-light-80' : 'bg-light-80 text-dark-100')}>
+        <Dialog.Popup className={clsx('fixed inset-0 z-50 flex flex-col', dark ? 'bg-dark-100 text-light-80' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-80')}>
           {/* Header with close button */}
           <div
             className={clsx(
               'flex justify-between items-center pl-3 border-b',
-              dark ? 'border-dark-80' : 'border-light-40',
+              dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80',
             )}
             style={{ height: 'var(--nav-h)' }}
           >
             <Dialog.Title className="sr-only">Navigation</Dialog.Title>
             <p className="text-h5 px-3">Video.js</p>
-            <Dialog.Close className={clsx('flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 text-light-80 intent:bg-dark-80')} aria-label="Close navigation menu">
+            <Dialog.Close className={clsx('flex items-center justify-center p-3 h-full aspect-square', dark ? 'bg-light-80 text-dark-100 intent:bg-light-40' : 'bg-dark-100 text-light-80 intent:bg-dark-80 dark:bg-light-80 dark:text-dark-100 dark:intent:bg-light-40')} aria-label="Close navigation menu">
               <X size={24} />
             </Dialog.Close>
           </div>
 
           {/* Children */}
-          {children ? <div className={clsx('border-b', dark ? 'border-dark-80' : 'border-light-40')}>{children}</div> : null}
+          {children ? <div className={clsx('border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>{children}</div> : null}
 
           {/* Navigation links */}
           <nav className="flex flex-col py-3">
diff --git a/website/src/components/ToggleGroup.tsx b/website/src/components/ToggleGroup.tsx
index a05e4af1..5b0339c6 100644
--- a/website/src/components/ToggleGroup.tsx
+++ b/website/src/components/ToggleGroup.tsx
@@ -14,6 +14,7 @@ export interface ToggleGroupProps<T = string> {
   onChange: (value: T) => void;
   options: ToggleOption<T>[];
   className?: string;
+  toggleClassName?: string;
   'aria-label'?: string;
 }
 
@@ -22,6 +23,7 @@ export default function ToggleGroup<T extends string = string>({
   onChange,
   options,
   className,
+  toggleClassName,
   'aria-label': ariaLabel,
 }: ToggleGroupProps<T>) {
   const handleChange = (newValue: string[]) => {
@@ -48,11 +50,11 @@ export default function ToggleGroup<T extends string = string>({
           key={option.value}
           value={option.value}
           disabled={option.disabled}
-          className={clsx(
+          className={twMerge(clsx(
             'text-dark-40 dark:text-light-40 data-[pressed]:text-current',
             'py-3 border-b border-transparent',
             option.disabled ? 'opacity-50 cursor-not-allowed' : 'intent:border-dark-40 dark:intent:border-light-40 data-[pressed]:border-current cursor-pointer',
-          )}
+          ), toggleClassName)}
         >
           {option.label}
         </Toggle>
diff --git a/website/src/components/home/HomePageControls.tsx b/website/src/components/home/HomePageControls.tsx
index 7613ba77..afbf02b1 100644
--- a/website/src/components/home/HomePageControls.tsx
+++ b/website/src/components/home/HomePageControls.tsx
@@ -9,9 +9,10 @@ export default function HomePageControls({ className }: { className?: string })
   const $media = useStore(media);
 
   return (
-    <section className={clsx('flex flex-col sm:flex-row sm:gap-20 items-center justify-center', className)}>
+    <section className={clsx('flex flex-col sm:flex-row gap-2 sm:gap-20 items-center justify-center', className)}>
       <ToggleGroup
         className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
+        toggleClassName="py-1 sm:py-3"
         value={$skin}
         onChange={value => skin.set(value)}
         options={[
@@ -23,6 +24,7 @@ export default function HomePageControls({ className }: { className?: string })
 
       <ToggleGroup
         className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
+        toggleClassName="py-1 sm:py-3"
         value={$framework}
         onChange={value => framework.set(value)}
         options={[
@@ -34,6 +36,7 @@ export default function HomePageControls({ className }: { className?: string })
 
       <ToggleGroup
         className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
+        toggleClassName="py-1 sm:py-3"
         value={$media}
         onChange={value => media.set(value)}
         options={[
diff --git a/website/src/components/typography/H6.astro b/website/src/components/typography/H6.astro
index e2b17829..322474e5 100644
--- a/website/src/components/typography/H6.astro
+++ b/website/src/components/typography/H6.astro
@@ -12,7 +12,7 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-base font-medium @lg:text-md my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(clsx('text-base font-medium @3xl:text-md my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
   {...props}
 >
   <slot />
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 461c01f3..ac33a06b 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -46,7 +46,7 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
   </header>
   <!-- padding corresponds to negative margin on player -->
   <main class="@container pt-11 pb-36 md:pt-21 lg:pt-32 px-6 md:px-10 w-full max-w-7xl mx-auto min-h-64">
-    <HomePageControls client:idle className="col-span-full my-10 sm:mb-20" />
+    <HomePageControls client:idle className="col-span-full mt-6 mb-10 sm:mb-20" />
     <HomePageDemo client:idle className="mb-6 lg:mb-30" />
     <section class="rounded-3xl">
       <header class="max-w-3xl mb-3">