From b6d71f1ea891bb9a1e11daecd5e47d901a0b80e9 Mon Sep 17 00:00:00 2001
From: Bastian Wissler <bastian.wissler@gmail.com>
Date: Sat, 20 Jan 2024 15:20:56 +0100
Subject: [PATCH 1/8] :lipstick: converted track list to grid/subgrid

---
 components/album/AlbumItem.vue                |  2 +-
 .../contributor/ContributorListItem.vue       |  5 ++--
 components/playlist/PlaylistItem.vue          |  2 +-
 components/podcast/PodcastItem.vue            |  2 +-
 components/track/TrackItem.vue                | 30 +++++++++----------
 modules/figma2tailwind/convertToTailwind.ts   |  5 ++++
 pages/search.vue                              |  4 ++-
 7 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/components/album/AlbumItem.vue b/components/album/AlbumItem.vue
index d27ffc08..f2d26417 100644
--- a/components/album/AlbumItem.vue
+++ b/components/album/AlbumItem.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
     <NuxtLink
       :to="{
         name: 'album-id',
diff --git a/components/contributor/ContributorListItem.vue b/components/contributor/ContributorListItem.vue
index cc79fb39..3c323e42 100644
--- a/components/contributor/ContributorListItem.vue
+++ b/components/contributor/ContributorListItem.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
     <NuxtLink
       :to="{
         name: 'playlist-contributor-id',
@@ -18,8 +18,9 @@ defineProps<{
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
       <div class="relative flex items-center justify-between gap-3">
-        <div v-if="contributor.cover" class="w-10">
+        <div class="w-10">
           <ProtectedImage
+            v-if="contributor.cover"
             :src="contributor.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
diff --git a/components/playlist/PlaylistItem.vue b/components/playlist/PlaylistItem.vue
index ae12476d..59e58c97 100644
--- a/components/playlist/PlaylistItem.vue
+++ b/components/playlist/PlaylistItem.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
     <NuxtLink
       :to="{
         name: 'playlist-curated-id',
diff --git a/components/podcast/PodcastItem.vue b/components/podcast/PodcastItem.vue
index d4465c21..83041376 100644
--- a/components/podcast/PodcastItem.vue
+++ b/components/podcast/PodcastItem.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
     <NuxtLink
       :to="{
         name: 'playlist-podcast-id',
diff --git a/components/track/TrackItem.vue b/components/track/TrackItem.vue
index 8efdf93d..f879f01d 100644
--- a/components/track/TrackItem.vue
+++ b/components/track/TrackItem.vue
@@ -88,15 +88,12 @@ function secondsToTime(totalSeconds: number | undefined) {
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3" @click.stop="playTrack">
-    <div
-      class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
-    ></div>
-    <div class="relative flex items-center justify-between gap-3">
-      <div
-        v-if="track.meta?.attachedPicture && showThumbnail"
-        class="relative w-10"
-      >
+  <li
+    class="w-full cursor-pointer grid grid-flow-col col-span-5 grid-cols-subgrid"
+    @click.stop="playTrack"
+  >
+    <div class="grid grid-flow-col col-span-5 grid-cols-subgrid">
+      <div v-if="track.meta?.attachedPicture && showThumbnail" class="relative">
         <ProtectedImage
           :src="track.meta?.attachedPicture"
           alt=""
@@ -112,9 +109,14 @@ function secondsToTime(totalSeconds: number | undefined) {
           />
         </div>
       </div>
-      <div class="mr-auto w-1/3">
+
+      <div
+        v-if="!(track.meta?.attachedPicture && showThumbnail)"
+        class="relative"
+      ></div>
+      <div class="mr-auto">
         <h4
-          class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
+          class="block overflow-hidden text-ellipsis font-semibold"
           :title="track.meta?.title || ''"
         >
           {{ track.meta?.title }}
@@ -122,15 +124,11 @@ function secondsToTime(totalSeconds: number | undefined) {
         <span
           v-if="track.meta?.artist"
           :title="track.meta?.artist"
-          class="block overflow-hidden text-ellipsis whitespace-nowrap text-label-1"
+          class="block overflow-hidden text-ellipsis text-label-1"
         >
           {{ track.meta?.artist }}
         </span>
       </div>
-      <div
-        v-if="!(track.meta?.attachedPicture && showThumbnail)"
-        class="block h-1 w-10"
-      ></div>
       <div v-if="!isTrackTypeKnown">
         <span class="text-label-2">{{ track.subtype }}</span>
       </div>
diff --git a/modules/figma2tailwind/convertToTailwind.ts b/modules/figma2tailwind/convertToTailwind.ts
index b0dd5dc3..3d429581 100644
--- a/modules/figma2tailwind/convertToTailwind.ts
+++ b/modules/figma2tailwind/convertToTailwind.ts
@@ -21,6 +21,11 @@ const config: Partial<Config> = {
   darkMode: "class",
   theme: {
     colors,
+    extend: {  
+      gridTemplateColumns: {
+        tracklist: "2.5rem 1fr 1fr 50px 144px" 
+      }
+    }
   },
 };
 
diff --git a/pages/search.vue b/pages/search.vue
index 5c0d066d..ff0d1f2e 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -97,7 +97,9 @@ const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
       </div>
       <div class="border-t border-label-4 p-4">
         <div>
-          <ol class="w-full divide-y divide-label-separator">
+          <ol
+            class="grid grid-cols-tracklist grid-rows-1 w-full divide-y divide-label-separator gap-4"
+          >
             <template v-for="item in results?.items" :key="item.id">
               <TrackItem
                 v-if="item.type === 'track'"

From b09f85912bec64d8e1cd6bcf59f11c840066061d Mon Sep 17 00:00:00 2001
From: Bastian Wissler <bastian.wissler@gmail.com>
Date: Sat, 20 Jan 2024 15:25:34 +0100
Subject: [PATCH 2/8] :lipstick: fixed TrackList.vue

---
 components/track/TrackList.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/track/TrackList.vue b/components/track/TrackList.vue
index 14959e79..71a844b8 100644
--- a/components/track/TrackList.vue
+++ b/components/track/TrackList.vue
@@ -28,7 +28,9 @@ const isTrackTypeKnown = () => {
 </script>
 
 <template>
-  <ol class="w-full divide-y divide-label-separator">
+  <ol
+    class="grid grid-cols-tracklist grid-rows-1 gap-4 w-full divide-y divide-label-separator"
+  >
     <template v-if="showSkeleton">
       <li
         v-for="skeleton in skeletonCount"

From 85c00227f6047eb6b3e3a7c08e096f8ba589e002 Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 24 Jan 2024 12:52:38 +0100
Subject: [PATCH 3/8] Restored icon-width and set width of last two columns to
 flexible

---
 modules/figma2tailwind/convertToTailwind.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/figma2tailwind/convertToTailwind.ts b/modules/figma2tailwind/convertToTailwind.ts
index 3d429581..cfc15b2e 100644
--- a/modules/figma2tailwind/convertToTailwind.ts
+++ b/modules/figma2tailwind/convertToTailwind.ts
@@ -23,7 +23,7 @@ const config: Partial<Config> = {
     colors,
     extend: {  
       gridTemplateColumns: {
-        tracklist: "2.5rem 1fr 1fr 50px 144px" 
+        tracklist: "3rem 1fr 1fr auto auto" 
       }
     }
   },

From e8aa27240098225bbc44d46b312f62156fa266ce Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 24 Jan 2024 12:53:04 +0100
Subject: [PATCH 4/8] Lists on start page also as grid

---
 pages/index.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index d7609994..c32b41d3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -127,7 +127,10 @@ const isSmallScreen = breakpoints.smallerOrEqual("lg");
             </div>
           </template>
         </div>
-        <ol v-else class="w-full divide-y divide-label-separator">
+        <ol
+          v-else
+          class="w-full divide-y divide-label-separator grid grid-cols-tracklist"
+        >
           <template v-for="item in group.items" :key="item.id">
             <TrackItem
               v-if="item.type === 'track'"

From 8ab0f2de5a33cadea80d0279a6f0b4456cd0f12a Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Wed, 24 Jan 2024 12:59:55 +0100
Subject: [PATCH 5/8] Aligned spacing of different list-item-types

---
 .../contributor/ContributorListItem.vue       | 15 +++---
 components/podcast/PodcastItem.vue            | 16 +++---
 components/track/TrackItem.vue                | 49 +++++++++++--------
 3 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/components/contributor/ContributorListItem.vue b/components/contributor/ContributorListItem.vue
index 3c323e42..6c61d39f 100644
--- a/components/contributor/ContributorListItem.vue
+++ b/components/contributor/ContributorListItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-5 grid-cols-subgrid"
       :to="{
         name: 'playlist-contributor-id',
         params: { id: contributor.id },
@@ -17,8 +20,8 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div class="w-10">
+      <div class="relative grid col-span-5 grid-cols-subgrid">
+        <div>
           <ProtectedImage
             v-if="contributor.cover"
             :src="contributor.cover"
@@ -26,7 +29,7 @@ defineProps<{
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="contributor.name || ''"
@@ -34,8 +37,8 @@ defineProps<{
             {{ contributor.name }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>
diff --git a/components/podcast/PodcastItem.vue b/components/podcast/PodcastItem.vue
index 83041376..0cf11724 100644
--- a/components/podcast/PodcastItem.vue
+++ b/components/podcast/PodcastItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-5 grid-cols-subgrid"
       :to="{
         name: 'playlist-podcast-id',
         params: { id: podcast.id },
@@ -17,15 +20,16 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="podcast.cover" class="w-10">
+      <div class="relative grid col-span-5 grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="podcast.cover"
             :src="podcast.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="podcast.title || ''"
@@ -33,8 +37,8 @@ defineProps<{
             {{ podcast.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>
diff --git a/components/track/TrackItem.vue b/components/track/TrackItem.vue
index f879f01d..22086287 100644
--- a/components/track/TrackItem.vue
+++ b/components/track/TrackItem.vue
@@ -89,24 +89,33 @@ function secondsToTime(totalSeconds: number | undefined) {
 
 <template>
   <li
-    class="w-full cursor-pointer grid grid-flow-col col-span-5 grid-cols-subgrid"
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
     @click.stop="playTrack"
   >
-    <div class="grid grid-flow-col col-span-5 grid-cols-subgrid">
-      <div v-if="track.meta?.attachedPicture && showThumbnail" class="relative">
-        <ProtectedImage
-          :src="track.meta?.attachedPicture"
-          alt=""
-          class="aspect-square w-10 rounded-md bg-background-2"
-        />
-        <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
-          <div
-            class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
-          ></div>
-          <NuxtIcon
-            name="play"
-            class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+    <div
+      class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
+    ></div>
+
+    <div class="relative grid col-span-5 grid-cols-subgrid">
+      <div
+        v-if="track.meta?.attachedPicture && showThumbnail"
+        class="flex items-center"
+      >
+        <div class="relative">
+          <ProtectedImage
+            :src="track.meta?.attachedPicture"
+            alt=""
+            class="aspect-square w-10 rounded-md bg-background-2"
           />
+          <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
+            <div
+              class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
+            ></div>
+            <NuxtIcon
+              name="play"
+              class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+            />
+          </div>
         </div>
       </div>
 
@@ -114,7 +123,7 @@ function secondsToTime(totalSeconds: number | undefined) {
         v-if="!(track.meta?.attachedPicture && showThumbnail)"
         class="relative"
       ></div>
-      <div class="mr-auto">
+      <div class="flex flex-col justify-center">
         <h4
           class="block overflow-hidden text-ellipsis font-semibold"
           :title="track.meta?.title || ''"
@@ -129,18 +138,18 @@ function secondsToTime(totalSeconds: number | undefined) {
           {{ track.meta?.artist }}
         </span>
       </div>
-      <div v-if="!isTrackTypeKnown">
+      <div v-if="!isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.subtype }}</span>
       </div>
-      <div v-if="isTrackTypeKnown">
+      <div v-if="isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.meta?.album }}</span>
       </div>
-      <div class="ml-auto">
+      <div class="flex items-center">
         <span class="text-label-2">{{
           secondsToTime(track.media?.[0]?.files?.[0]?.duration)
         }}</span>
       </div>
-      <div class="ml-auto flex items-center justify-center gap-1">
+      <div class="flex items-center gap-1">
         <button
           class="px-2 py-0 opacity-0 hover:bg-[red] hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.a11y.download')"

From ba17e4a637e3033c5c6f467469ce379c1f9b817a Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Sun, 28 Jan 2024 17:45:58 +0100
Subject: [PATCH 6/8] Use `col-span-full` instead of `col-span-5`

---
 components/contributor/ContributorListItem.vue | 6 +++---
 components/podcast/PodcastItem.vue             | 6 +++---
 components/track/TrackItem.vue                 | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/contributor/ContributorListItem.vue b/components/contributor/ContributorListItem.vue
index 6c61d39f..06ef7b0e 100644
--- a/components/contributor/ContributorListItem.vue
+++ b/components/contributor/ContributorListItem.vue
@@ -8,10 +8,10 @@ defineProps<{
 
 <template>
   <li
-    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
   >
     <NuxtLink
-      class="grid col-span-5 grid-cols-subgrid"
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-contributor-id',
         params: { id: contributor.id },
@@ -20,7 +20,7 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative grid col-span-5 grid-cols-subgrid">
+      <div class="relative grid col-span-full grid-cols-subgrid">
         <div>
           <ProtectedImage
             v-if="contributor.cover"
diff --git a/components/podcast/PodcastItem.vue b/components/podcast/PodcastItem.vue
index 0cf11724..447feb15 100644
--- a/components/podcast/PodcastItem.vue
+++ b/components/podcast/PodcastItem.vue
@@ -8,10 +8,10 @@ defineProps<{
 
 <template>
   <li
-    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
   >
     <NuxtLink
-      class="grid col-span-5 grid-cols-subgrid"
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-podcast-id',
         params: { id: podcast.id },
@@ -20,7 +20,7 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative grid col-span-5 grid-cols-subgrid">
+      <div class="relative grid col-span-full grid-cols-subgrid">
         <div>
           <ProtectedImage
             v-if="podcast.cover"
diff --git a/components/track/TrackItem.vue b/components/track/TrackItem.vue
index 22086287..d50c9b94 100644
--- a/components/track/TrackItem.vue
+++ b/components/track/TrackItem.vue
@@ -89,14 +89,14 @@ function secondsToTime(totalSeconds: number | undefined) {
 
 <template>
   <li
-    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
     @click.stop="playTrack"
   >
     <div
       class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
     ></div>
 
-    <div class="relative grid col-span-5 grid-cols-subgrid">
+    <div class="relative grid col-span-full grid-cols-subgrid">
       <div
         v-if="track.meta?.attachedPicture && showThumbnail"
         class="flex items-center"

From d18ff1a66386e0c3a378aa9a7b4b1b7c0fa2a3ff Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Sun, 28 Jan 2024 17:47:44 +0100
Subject: [PATCH 7/8] Adjusted content of `AlbumItem` and `PlaylistItem` to be
 as `PodcastItem`

---
 components/album/AlbumItem.vue       | 16 ++++++++++------
 components/playlist/PlaylistItem.vue | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/components/album/AlbumItem.vue b/components/album/AlbumItem.vue
index f2d26417..c8f894a1 100644
--- a/components/album/AlbumItem.vue
+++ b/components/album/AlbumItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'album-id',
         params: { id: album.id },
@@ -17,15 +20,16 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="album.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="album.cover"
             :src="album.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="album.title || ''"
@@ -33,8 +37,8 @@ defineProps<{
             {{ album.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>
diff --git a/components/playlist/PlaylistItem.vue b/components/playlist/PlaylistItem.vue
index 59e58c97..7532b6ac 100644
--- a/components/playlist/PlaylistItem.vue
+++ b/components/playlist/PlaylistItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-curated-id',
         params: { id: playlist.id },
@@ -17,15 +20,16 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="playlist.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="playlist.cover"
             :src="playlist.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="playlist.title || ''"
@@ -33,8 +37,8 @@ defineProps<{
             {{ playlist.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>

From f84c2d6c4f8b96c4cebb9c6efbd4d510cddeb869 Mon Sep 17 00:00:00 2001
From: Simon Schick <simonsimcity@gmail.com>
Date: Sun, 28 Jan 2024 18:00:32 +0100
Subject: [PATCH 8/8] All cols (excepted the first) have "auto" as size

---
 modules/figma2tailwind/convertToTailwind.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/figma2tailwind/convertToTailwind.ts b/modules/figma2tailwind/convertToTailwind.ts
index cfc15b2e..aca9b723 100644
--- a/modules/figma2tailwind/convertToTailwind.ts
+++ b/modules/figma2tailwind/convertToTailwind.ts
@@ -23,7 +23,7 @@ const config: Partial<Config> = {
     colors,
     extend: {  
       gridTemplateColumns: {
-        tracklist: "3rem 1fr 1fr auto auto" 
+        tracklist: "3rem auto auto auto auto" 
       }
     }
   },