[WEB] Improve homepage carousel on smaller screens; fixes BAF-375

samtgarson · Mar 23, 2024 · ea0ee7d · ea0ee7d
1 parent c94c0e5
commit ea0ee7d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/web/src/app/(main)/page.tsx b/web/src/app/(main)/page.tsx
@@ -41,7 +41,7 @@ async function Page() {
             title
             faces
             data-superjson
-            className="h-[90vh] max-h-[800px]"
+            className="h-[90vh] max-h-[800px] overflow-y-hidden"
           />
         </div>
       )}

diff --git a/web/src/components/feature-carousel/face.ts b/web/src/components/feature-carousel/face.ts
@@ -5,7 +5,7 @@ import { Dot, RandomPlacer } from 'src/utils/random-placer'
 import { AvatarSize } from '../atoms/avatar'
 
 const placer = new RandomPlacer(80, 60)
-const sizes: AvatarSize[] = ['xl', '2xl', '2xl', '2xl', '3xl', '3xl']
+const sizes: AvatarSize[] = ['lg', 'xl', 'xl', 'xl', '2xl', '2xl']
 
 export class Face {
   constructor(

diff --git a/web/src/components/feature-carousel/item.tsx b/web/src/components/feature-carousel/item.tsx
@@ -56,7 +56,7 @@ export function FeatureCarouselItem({
       {feature.book.cover && (
         <Image
           {...feature.book.cover?.imageAttrs(360)}
-          className="book-shadow pointer-events-none h-[250px] w-auto max-w-none sm:h-[360px]"
+          className="book-shadow pointer-events-none h-[250px] w-auto max-w-none sm:h-[360px] short:h-[200px]"
         />
       )}
       <div
@@ -67,22 +67,22 @@ export function FeatureCarouselItem({
         })}
       >
         {feature.tagLine && (
-          <p className="all-caps-sm mb-4 w-max bg-black px-2.5 py-1.5 text-white">
+          <p className="all-caps-sm mb-4 w-max bg-black px-2.5 py-1.5 text-white short:hidden">
             {feature.tagLine}
           </p>
         )}
         {feature.title && (
           <p className="text-24 lg:text-40 mb-2 max-w-xl">{feature.title}</p>
         )}
         {feature.description && (
-          <p className="text-14 lg:text-18 mb-4 max-w-xl lg:mb-8">
+          <p className="text-14 lg:text-18 mb-4 max-w-xl lg:mb-8 line-clamp-3">
             {feature.description}
           </p>
         )}
         <div className="flex items-center gap-2">
           {feature.book.authors.map((author) => (
             <Fragment key={author.slug}>
-              <Avatar profile={author} size="2xs" />
+              <Avatar profile={author} size="2xs" mobileSize="3xs" />
               <p>{author.name}</p>
             </Fragment>
           ))}

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -46,7 +46,8 @@ module.exports = {
         'accordion-close': 'accordion-close 0.2s ease-out both'
       },
       screens: {
-        'mobile-only': { max: '767px' }
+        'mobile-only': { max: '767px' },
+        short: { raw: '(max-height: 650px)' }
       },
       zIndex: {
         nav: 60,