Preserve consistent gap between items in the favorites section (#170)

src/web/sections/favorites/book-tile.astro

@@ -8,7 +8,7 @@ export interface Props extends Book {}
 const { author, image, title, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo src={image} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md" width={300} height={400} />
   <div class="w-full gap-1">
     <Typography variant="tile-title">

src/web/sections/favorites/favorites-section.web.astro

@@ -15,16 +15,16 @@ const { config, books, medias, people, videos } = Astro.props;
 
 <SectionCard {...config}>
   <div class="flex flex-col gap-16">
-    <FavoritesSubSection class="grid-cols-fluid200" subSection={books}>
+    <FavoritesSubSection minTileWidth={160} subSection={books}>
       {books?.data.map((book) => <BookTile {...book} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid120" subSection={people}>
+    <FavoritesSubSection minTileWidth={120} subSection={people}>
       {people?.data.map((person) => <PersonTile {...person} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid240" subSection={videos}>
+    <FavoritesSubSection minTileWidth={204} subSection={videos}>
       {videos?.data.map((video) => <VideoTile {...video} />)}
     </FavoritesSubSection>
-    <FavoritesSubSection class="grid-cols-fluid120" subSection={medias}>
+    <FavoritesSubSection minTileWidth={120} subSection={medias}>
       {medias?.data.map((media) => <MediaTile {...media} />)}
     </FavoritesSubSection>
   </div>

src/web/sections/favorites/favorites-sub-section.astro

@@ -4,19 +4,25 @@ import Typography from '@/web/components/typography.astro';
 
 export interface Props {
   subSection?: SubSection;
-  class: string;
+  minTileWidth: number;
 }
 
-const { subSection, ...props } = Astro.props;
+const { subSection, minTileWidth } = Astro.props;
 ---
 
 {
   subSection && (
     <div class="flex flex-col gap-6">
       <Typography variant="section-subtitle">{subSection.title}</Typography>
-      <div class:list={['gap-8 grid', props.class]}>
+      <div class="tile grid gap-8" style={{ '--min-tile-width': `${minTileWidth}px` }}>
         <slot />
       </div>
     </div>
   )
 }
+
+<style>
+  .tile {
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-tile-width), 1fr));
+  }
+</style>

src/web/sections/favorites/media-tile.astro

@@ -8,7 +8,7 @@ export interface Props extends Media {}
 const { image, title, type, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} width={200} height={200} />
   <div class="gap-1">
     <Typography variant="tile-title">

src/web/sections/favorites/person-tile.astro

@@ -8,7 +8,7 @@ export interface Props extends Person {}
 const { image, name, url } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo
     class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     src={image}

src/web/sections/favorites/video-tile.astro

@@ -8,7 +8,7 @@ export interface Props extends Video {}
 const { title, url, image } = Astro.props;
 ---
 
-<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Photo class="rounded-lg shadow-md aspect-video object-cover" src={image} alt={title} width={480} height={270} />
   <Typography variant="tile-title">
     {title}

tailwind.config.cjs

@@ -13,14 +13,6 @@ module.exports = {
       gray: colors.gray,
     },
     extend: {
-      spacing: {
-        22: '5.5rem',
-      },
-      gridTemplateColumns: {
-        fluid120: 'repeat(auto-fit, minmax(120px, 1fr))',
-        fluid200: 'repeat(auto-fit, minmax(200px, 1fr))',
-        fluid240: 'repeat(auto-fit, minmax(240px, 1fr))',
-      },
       keyframes: {
         show: {
           from: { opacity: '0' },