From 595136120b13c3bbc2953e06667d0209aaac83cc Mon Sep 17 00:00:00 2001
From: Iqro-dev <igor.sokolowski.code@gmail.com>
Date: Thu, 19 Dec 2024 17:40:59 +0100
Subject: [PATCH] fix(tests): update snapshots

---
 tests/snapshots/item-card.spec.tsx.snap     |  12 +-
 tests/snapshots/item-name.spec.tsx.snap     |   8 +-
 tests/snapshots/item-top-card.spec.tsx.snap |  56 ++---
 tests/snapshots/items-list.spec.tsx.snap    | 228 ++++++++++----------
 tests/snapshots/items-section.spec.tsx.snap | 136 ++++++------
 5 files changed, 220 insertions(+), 220 deletions(-)

diff --git a/tests/snapshots/item-card.spec.tsx.snap b/tests/snapshots/item-card.spec.tsx.snap
index 41fc50c0..712eccb4 100644
--- a/tests/snapshots/item-card.spec.tsx.snap
+++ b/tests/snapshots/item-card.spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`ItemCard > should match snapshot as album 1`] = `
             href="/artist/undefined"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+              class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
             >
               Album 1
             </p>
@@ -86,7 +86,7 @@ exports[`ItemCard > should match snapshot as album 1`] = `
           href="/artist/undefined"
         >
           <p
-            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+            class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
           >
             Album 1
           </p>
@@ -203,7 +203,7 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
             href="/artist/123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+              class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
             >
               Darkthrone
             </p>
@@ -263,7 +263,7 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
           href="/artist/123"
         >
           <p
-            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+            class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
           >
             Darkthrone
           </p>
@@ -380,7 +380,7 @@ exports[`ItemCard > should match snapshot as track 1`] = `
             href="/track/123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+              class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
             >
               Track 1
             </p>
@@ -447,7 +447,7 @@ exports[`ItemCard > should match snapshot as track 1`] = `
           href="/track/123"
         >
           <p
-            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+            class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px] !max-w-[200px]"
           >
             Track 1
           </p>
diff --git a/tests/snapshots/item-name.spec.tsx.snap b/tests/snapshots/item-name.spec.tsx.snap
index c1bfc2ee..51426b33 100644
--- a/tests/snapshots/item-name.spec.tsx.snap
+++ b/tests/snapshots/item-name.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`ItemName > should match snapshot 1`] = `
         href=""
       >
         <p
-          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px]"
+          class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px]"
         >
           A Dark Forgotten Past
         </p>
@@ -23,7 +23,7 @@ exports[`ItemName > should match snapshot 1`] = `
       href=""
     >
       <p
-        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px]"
+        class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px]"
       >
         A Dark Forgotten Past
       </p>
@@ -93,7 +93,7 @@ exports[`ItemName > should match snapshot with long name 1`] = `
         href=""
       >
         <p
-          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px]"
+          class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px]"
         >
           Dark Medieval Times (Remastered 2021)
         </p>
@@ -106,7 +106,7 @@ exports[`ItemName > should match snapshot with long name 1`] = `
       href=""
     >
       <p
-        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px]"
+        class="max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px]"
       >
         Dark Medieval Times (Remastered 2021)
       </p>
diff --git a/tests/snapshots/item-top-card.spec.tsx.snap b/tests/snapshots/item-top-card.spec.tsx.snap
index e54b52e9..86327051 100644
--- a/tests/snapshots/item-top-card.spec.tsx.snap
+++ b/tests/snapshots/item-top-card.spec.tsx.snap
@@ -35,14 +35,14 @@ exports[`ItemTopCard > should match snapshot as album 1`] = `
               href="/artist/undefined"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Album 1
               </p>
             </a>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <div
               class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -83,14 +83,14 @@ exports[`ItemTopCard > should match snapshot as album 1`] = `
             href="/artist/undefined"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Album 1
             </p>
           </a>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <div
             class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -188,14 +188,14 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = `
               href="/artist/123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Darkthrone
               </p>
             </a>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <div
               class="flex h-full flex-row flex-wrap justify-center gap-2"
@@ -255,14 +255,14 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = `
             href="/artist/123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Darkthrone
             </p>
           </a>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <div
             class="flex h-full flex-row flex-wrap justify-center gap-2"
@@ -379,7 +379,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Track 1
               </p>
@@ -394,7 +394,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
             </span>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <span
               class="w-[2rem] text-center text-5xl"
@@ -532,7 +532,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Track 1
             </p>
@@ -547,7 +547,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
           </span>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <span
             class="w-[2rem] text-center text-5xl"
@@ -742,7 +742,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Track 1
               </p>
@@ -757,7 +757,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
             </span>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <span
               class="w-[2rem] text-center text-5xl"
@@ -901,7 +901,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Track 1
             </p>
@@ -916,7 +916,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
           </span>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <span
             class="w-[2rem] text-center text-5xl"
@@ -1117,7 +1117,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Track 1
               </p>
@@ -1132,7 +1132,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
             </span>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <div
               class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -1173,7 +1173,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Track 1
             </p>
@@ -1188,7 +1188,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
           </span>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <div
             class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -1286,7 +1286,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Track 1
               </p>
@@ -1301,7 +1301,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
             </span>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <div
               class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -1367,7 +1367,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Track 1
             </p>
@@ -1382,7 +1382,7 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
           </span>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <div
             class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -1505,7 +1505,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
               >
                 Track 1
               </p>
@@ -1520,7 +1520,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
             </span>
           </div>
           <div
-            class="flex w-full flex-col items-center justify-center gap-4"
+            class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
           >
             <div
               class="mt-4 flex w-full flex-row justify-center gap-1"
@@ -1586,7 +1586,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
             >
               Track 1
             </p>
@@ -1601,7 +1601,7 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
           </span>
         </div>
         <div
-          class="flex w-full flex-col items-center justify-center gap-4"
+          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
         >
           <div
             class="mt-4 flex w-full flex-row justify-center gap-1"
diff --git a/tests/snapshots/items-list.spec.tsx.snap b/tests/snapshots/items-list.spec.tsx.snap
index 59541fde..b9e86d32 100644
--- a/tests/snapshots/items-list.spec.tsx.snap
+++ b/tests/snapshots/items-list.spec.tsx.snap
@@ -684,7 +684,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
             class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
           >
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+              class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -713,7 +713,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     href="/album/undefined?highlighted-track-id=2"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -728,7 +728,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -767,7 +767,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
               </header>
             </div>
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+              class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -796,7 +796,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     href="/album/undefined?highlighted-track-id=123"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -811,7 +811,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -883,7 +883,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     href="/album/undefined?highlighted-track-id=3"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -898,7 +898,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -940,7 +940,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+          class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
           role="region"
         >
           <div
@@ -985,7 +985,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         href="/album/undefined?highlighted-track-id=123"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -1000,7 +1000,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -1074,7 +1074,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         href="/album/undefined?highlighted-track-id=2"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -1089,7 +1089,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -1163,7 +1163,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         href="/album/undefined?highlighted-track-id=3"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -1178,7 +1178,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -1220,7 +1220,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
             </div>
           </div>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -1245,7 +1245,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
             </span>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -1287,7 +1287,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
           class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
         >
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+            class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -1316,7 +1316,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   href="/album/undefined?highlighted-track-id=2"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -1331,7 +1331,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -1370,7 +1370,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
             </header>
           </div>
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+            class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -1399,7 +1399,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   href="/album/undefined?highlighted-track-id=123"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -1414,7 +1414,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -1486,7 +1486,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                   href="/album/undefined?highlighted-track-id=3"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -1501,7 +1501,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -1543,7 +1543,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+        class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
         role="region"
       >
         <div
@@ -1588,7 +1588,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       href="/album/undefined?highlighted-track-id=123"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -1603,7 +1603,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1677,7 +1677,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       href="/album/undefined?highlighted-track-id=2"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -1692,7 +1692,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1766,7 +1766,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       href="/album/undefined?highlighted-track-id=3"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -1781,7 +1781,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1823,7 +1823,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
           </div>
         </div>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -1848,7 +1848,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
           </span>
         </button>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -2616,7 +2616,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
             class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
           >
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+              class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -2645,7 +2645,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     href="/album/undefined?highlighted-track-id=2"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -2660,7 +2660,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -2671,7 +2671,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     class="mt-4 flex w-full flex-row justify-center gap-1"
                   >
                     <div
-                      class="relative w-full"
+                      class="relative w-full max-w-[350px]"
                     >
                       <div
                         aria-valuemax="100"
@@ -2699,7 +2699,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
               </header>
             </div>
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+              class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -2728,7 +2728,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     href="/album/undefined?highlighted-track-id=123"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -2743,7 +2743,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -2754,7 +2754,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     class="mt-4 flex w-full flex-row justify-center gap-1"
                   >
                     <div
-                      class="relative w-full"
+                      class="relative w-full max-w-[350px]"
                     >
                       <div
                         aria-valuemax="100"
@@ -2815,7 +2815,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     href="/album/undefined?highlighted-track-id=3"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Track 1
                     </p>
@@ -2830,7 +2830,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   </span>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -2841,7 +2841,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     class="mt-4 flex w-full flex-row justify-center gap-1"
                   >
                     <div
-                      class="relative w-full"
+                      class="relative w-full max-w-[350px]"
                     >
                       <div
                         aria-valuemax="100"
@@ -2872,7 +2872,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+          class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
           role="region"
         >
           <div
@@ -2917,7 +2917,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         href="/album/undefined?highlighted-track-id=123"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2932,7 +2932,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -2943,7 +2943,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         class="mt-4 flex w-full flex-row justify-center gap-1"
                       >
                         <div
-                          class="relative w-full"
+                          class="relative w-full max-w-[350px]"
                         >
                           <div
                             aria-valuemax="100"
@@ -3006,7 +3006,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         href="/album/undefined?highlighted-track-id=2"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -3021,7 +3021,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -3032,7 +3032,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         class="mt-4 flex w-full flex-row justify-center gap-1"
                       >
                         <div
-                          class="relative w-full"
+                          class="relative w-full max-w-[350px]"
                         >
                           <div
                             aria-valuemax="100"
@@ -3095,7 +3095,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         href="/album/undefined?highlighted-track-id=3"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -3110,7 +3110,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -3121,7 +3121,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         class="mt-4 flex w-full flex-row justify-center gap-1"
                       >
                         <div
-                          class="relative w-full"
+                          class="relative w-full max-w-[350px]"
                         >
                           <div
                             aria-valuemax="100"
@@ -3152,7 +3152,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
             </div>
           </div>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -3177,7 +3177,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
             </span>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -3219,7 +3219,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
           class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
         >
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+            class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -3248,7 +3248,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   href="/album/undefined?highlighted-track-id=2"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -3263,7 +3263,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -3274,7 +3274,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   class="mt-4 flex w-full flex-row justify-center gap-1"
                 >
                   <div
-                    class="relative w-full"
+                    class="relative w-full max-w-[350px]"
                   >
                     <div
                       aria-valuemax="100"
@@ -3302,7 +3302,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
             </header>
           </div>
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+            class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -3331,7 +3331,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   href="/album/undefined?highlighted-track-id=123"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -3346,7 +3346,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -3357,7 +3357,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   class="mt-4 flex w-full flex-row justify-center gap-1"
                 >
                   <div
-                    class="relative w-full"
+                    class="relative w-full max-w-[350px]"
                   >
                     <div
                       aria-valuemax="100"
@@ -3418,7 +3418,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   href="/album/undefined?highlighted-track-id=3"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Track 1
                   </p>
@@ -3433,7 +3433,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                 </span>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -3444,7 +3444,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                   class="mt-4 flex w-full flex-row justify-center gap-1"
                 >
                   <div
-                    class="relative w-full"
+                    class="relative w-full max-w-[350px]"
                   >
                     <div
                       aria-valuemax="100"
@@ -3475,7 +3475,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+        class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
         role="region"
       >
         <div
@@ -3520,7 +3520,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       href="/album/undefined?highlighted-track-id=123"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3535,7 +3535,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -3546,7 +3546,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       class="mt-4 flex w-full flex-row justify-center gap-1"
                     >
                       <div
-                        class="relative w-full"
+                        class="relative w-full max-w-[350px]"
                       >
                         <div
                           aria-valuemax="100"
@@ -3609,7 +3609,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       href="/album/undefined?highlighted-track-id=2"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3624,7 +3624,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -3635,7 +3635,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       class="mt-4 flex w-full flex-row justify-center gap-1"
                     >
                       <div
-                        class="relative w-full"
+                        class="relative w-full max-w-[350px]"
                       >
                         <div
                           aria-valuemax="100"
@@ -3698,7 +3698,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       href="/album/undefined?highlighted-track-id=3"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3713,7 +3713,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -3724,7 +3724,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       class="mt-4 flex w-full flex-row justify-center gap-1"
                     >
                       <div
-                        class="relative w-full"
+                        class="relative w-full max-w-[350px]"
                       >
                         <div
                           aria-valuemax="100"
@@ -3755,7 +3755,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
           </div>
         </div>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -3780,7 +3780,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
           </span>
         </button>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -4772,7 +4772,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
             class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
           >
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+              class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -4801,14 +4801,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/2"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Darkthrone
                     </p>
                   </a>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -4933,7 +4933,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
               </header>
             </div>
             <div
-              class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+              class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
             >
               <header
                 class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -4962,14 +4962,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/123"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Darkthrone
                     </p>
                   </a>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -5121,14 +5121,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/3"
                   >
                     <p
-                      class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                     >
                       Darkthrone
                     </p>
                   </a>
                 </div>
                 <div
-                  class="flex w-full flex-col items-center justify-center gap-4"
+                  class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                 >
                   <span
                     class="w-[2rem] text-center text-5xl"
@@ -5262,7 +5262,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+          class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
           role="region"
         >
           <div
@@ -5307,14 +5307,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/123"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -5468,14 +5468,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/2"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -5635,14 +5635,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/3"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -5776,7 +5776,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
             </div>
           </div>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -5801,7 +5801,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
             </span>
           </button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+            class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -5942,7 +5942,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
           class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
         >
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+            class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -5971,14 +5971,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/2"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Darkthrone
                   </p>
                 </a>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -6103,7 +6103,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
             </header>
           </div>
           <div
-            class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+            class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
           >
             <header
               class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -6132,14 +6132,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/123"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Darkthrone
                   </p>
                 </a>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -6291,14 +6291,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/3"
                 >
                   <p
-                    class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                   >
                     Darkthrone
                   </p>
                 </a>
               </div>
               <div
-                class="flex w-full flex-col items-center justify-center gap-4"
+                class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
               >
                 <span
                   class="w-[2rem] text-center text-5xl"
@@ -6432,7 +6432,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+        class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
         role="region"
       >
         <div
@@ -6477,14 +6477,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/123"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -6638,14 +6638,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/2"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -6805,14 +6805,14 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/3"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -6946,7 +6946,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
           </div>
         </div>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -6971,7 +6971,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
           </span>
         </button>
         <button
-          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+          class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
diff --git a/tests/snapshots/items-section.spec.tsx.snap b/tests/snapshots/items-section.spec.tsx.snap
index 95889017..42acc563 100644
--- a/tests/snapshots/items-section.spec.tsx.snap
+++ b/tests/snapshots/items-section.spec.tsx.snap
@@ -30,7 +30,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                 class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
               >
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+                  class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
                 >
                   <header
                     class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -59,14 +59,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/2"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -191,7 +191,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                   </header>
                 </div>
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+                  class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
                 >
                   <header
                     class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -220,14 +220,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/123"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -379,14 +379,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/3"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Darkthrone
                         </p>
                       </a>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -520,7 +520,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
             </div>
             <div
               aria-roledescription="carousel"
-              class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+              class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
               role="region"
             >
               <div
@@ -565,14 +565,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/123"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Darkthrone
                             </p>
                           </a>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -726,14 +726,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/2"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Darkthrone
                             </p>
                           </a>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -893,14 +893,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/3"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Darkthrone
                             </p>
                           </a>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -1034,7 +1034,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                 </div>
               </div>
               <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -1059,7 +1059,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                 </span>
               </button>
               <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -1220,7 +1220,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
               class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
             >
               <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+                class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
               >
                 <header
                   class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -1249,14 +1249,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/2"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1381,7 +1381,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                 </header>
               </div>
               <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+                class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
               >
                 <header
                   class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -1410,14 +1410,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/123"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1569,14 +1569,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/3"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Darkthrone
                       </p>
                     </a>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -1710,7 +1710,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
           </div>
           <div
             aria-roledescription="carousel"
-            class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+            class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
             role="region"
           >
             <div
@@ -1755,14 +1755,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/123"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Darkthrone
                           </p>
                         </a>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -1916,14 +1916,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/2"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Darkthrone
                           </p>
                         </a>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -2083,14 +2083,14 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/3"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Darkthrone
                           </p>
                         </a>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -2224,7 +2224,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
               </div>
             </div>
             <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg
@@ -2249,7 +2249,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
               </span>
             </button>
             <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg
@@ -2634,7 +2634,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                 class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
               >
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+                  class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
                 >
                   <header
                     class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -2663,7 +2663,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=2"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2678,7 +2678,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -2784,7 +2784,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                   </header>
                 </div>
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+                  class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
                 >
                   <header
                     class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -2813,7 +2813,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=123"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2828,7 +2828,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -2961,7 +2961,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=3"
                       >
                         <p
-                          class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2976,7 +2976,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       </span>
                     </div>
                     <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                      class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                     >
                       <span
                         class="w-[2rem] text-center text-5xl"
@@ -3091,7 +3091,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
             </div>
             <div
               aria-roledescription="carousel"
-              class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+              class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
               role="region"
             >
               <div
@@ -3136,7 +3136,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                             href="/album/undefined?highlighted-track-id=123"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Track 1
                             </p>
@@ -3151,7 +3151,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           </span>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -3286,7 +3286,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                             href="/album/undefined?highlighted-track-id=2"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Track 1
                             </p>
@@ -3301,7 +3301,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           </span>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -3442,7 +3442,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                             href="/album/undefined?highlighted-track-id=3"
                           >
                             <p
-                              class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                             >
                               Track 1
                             </p>
@@ -3457,7 +3457,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           </span>
                         </div>
                         <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
+                          class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                         >
                           <span
                             class="w-[2rem] text-center text-5xl"
@@ -3572,7 +3572,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                 </div>
               </div>
               <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -3597,7 +3597,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                 </span>
               </button>
               <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -3659,7 +3659,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
               class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
             >
               <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+                class="relative flex h-full flex-col justify-start gap-2 -top-8 lg:-top-12 w-1/2"
               >
                 <header
                   class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -3688,7 +3688,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=2"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3703,7 +3703,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -3809,7 +3809,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                 </header>
               </div>
               <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+                class="relative flex h-full flex-col justify-start gap-2 -top-16 lg:-top-24 w-1/2"
               >
                 <header
                   class="m-0 flex w-full flex-col items-center gap-2 p-0"
@@ -3838,7 +3838,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=123"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3853,7 +3853,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -3986,7 +3986,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=3"
                     >
                       <p
-                        class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                       >
                         Track 1
                       </p>
@@ -4001,7 +4001,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                     </span>
                   </div>
                   <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
+                    class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                   >
                     <span
                       class="w-[2rem] text-center text-5xl"
@@ -4116,7 +4116,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
           </div>
           <div
             aria-roledescription="carousel"
-            class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]"
+            class="relative max-w-full self-center sm:min-w-[500px] sm:max-w-[550px] md:hidden"
             role="region"
           >
             <div
@@ -4161,7 +4161,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           href="/album/undefined?highlighted-track-id=123"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Track 1
                           </p>
@@ -4176,7 +4176,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         </span>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -4311,7 +4311,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           href="/album/undefined?highlighted-track-id=2"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Track 1
                           </p>
@@ -4326,7 +4326,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         </span>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -4467,7 +4467,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           href="/album/undefined?highlighted-track-id=3"
                         >
                           <p
-                            class="max-w-[350px] truncate sm:max-w-[400px] md:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate md:max-w-[250px] xl:max-w-[350px] max-w-[90vw] text-2xl"
                           >
                             Track 1
                           </p>
@@ -4482,7 +4482,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         </span>
                       </div>
                       <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                        class="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4"
                       >
                         <span
                           class="w-[2rem] text-center text-5xl"
@@ -4597,7 +4597,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
               </div>
             </div>
             <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2"
+              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-2 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg
@@ -4622,7 +4622,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
               </span>
             </button>
             <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2"
+              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-2 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg