fix(website): mobile optimizations

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">

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>

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={[

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 />

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">