fix(routes/show): add basic css responsive design

This patch adds a basic CSS-only responsive design to the show page.
There is still much room for improvement (I should probably swap out
entire components when on mobile), but this works OK for now and is an
improvement over what was previously unusable on mobile.

Closes: NC-734

Author: nicholaschiang

app/routes/_header.shows.$seasonYear.$seasonName.($sex).$brandSlug/route.tsx

@@ -126,19 +126,29 @@ export default function ShowPage() {
   const aboutFlexGrow = aboutWidth / looksWidth
   const looksFlexGrow = 1
   return (
-    <main className='fixed inset-0 overflow-hidden flex'>
-      <div className='w-0 overflow-auto' style={{ flexGrow: aboutFlexGrow }}>
+    <main className='sm:fixed sm:inset-0 sm:overflow-hidden sm:flex sm:p-0 p-6'>
+      <div
+        className='sm:w-0 sm:overflow-auto'
+        style={{ flexGrow: aboutFlexGrow }}
+      >
         <div
-          className='pt-16 pl-6 pb-6 ml-auto w-full'
-          style={{ maxWidth: maxWidth * about }}
+          className='sm:pt-16 sm:pl-6 pb-6 sm:ml-auto w-full'
+          style={{
+            maxWidth: viewportWidth > maxWidth ? maxWidth * about : undefined,
+          }}
         >
           <About />
         </div>
       </div>
-      <div className='w-0 overflow-auto' style={{ flexGrow: looksFlexGrow }}>
+      <div
+        className='sm:w-0 sm:overflow-auto'
+        style={{ flexGrow: looksFlexGrow }}
+      >
         <div
-          className='px-6 pt-16 pb-6 mr-auto w-full'
-          style={{ maxWidth: maxWidth * looks }}
+          className='sm:px-6 sm:pt-16 sm:pb-6 sm:mr-auto w-full sm:max-w-auto'
+          style={{
+            maxWidth: viewportWidth > maxWidth ? maxWidth * looks : undefined,
+          }}
         >
           <Looks />
         </div>

app/routes/_header.shows.$seasonYear.$seasonName.($sex).$brandSlug/scores-header.tsx

@@ -46,7 +46,7 @@ export function ScoresHeader() {
           )}
         </div>
         <article className='flex-1 bg-gray-100 dark:bg-gray-900 text-center px-6 flex flex-col'>
-          <h1 className='font-serif font-bold text-5xl mb-1 mt-8'>
+          <h1 className='font-serif font-bold text-2xl md:text-3xl lg:text-5xl mb-1 mt-8'>
             {show.brand.name}
           </h1>
           <h2 className='uppercase mb-6 text-sm'>{getShowSeason(show)}</h2>
@@ -76,16 +76,19 @@ function ScoreItem({ score, name }: ScoreItemProps) {
   return (
     <li className='flex gap-2 justify-center'>
       <img
-        className={cn('flex-none w-20', score.totalCount === 0 && 'grayscale')}
+        className={cn(
+          'hidden lg:block flex-none w-20',
+          score.totalCount === 0 && 'grayscale',
+        )}
         src={`/flowers/${img}.png`}
         alt=''
       />
-      <div>
-        <h2 className='text-5xl font-black font-serif'>
+      <div className='mb-6 lg:mb-0'>
+        <h2 className='text-3xl lg:text-5xl font-black font-serif'>
           {score.totalCount === 0 ? '--' : `${num}%`}
         </h2>
-        <p className='text-xs font-semibold uppercase'>{name}</p>
-        <p className='text-xs'>
+        <p className='text-3xs lg:text-xs font-semibold uppercase'>{name}</p>
+        <p className='text-3xs lg:text-xs'>
           {score.totalCount === 0
             ? 'No Reviews'
             : `${score.totalCount} Reviews`}