diff --git a/app/components/items/cards/item-top-card.tsx b/app/components/items/cards/item-top-card.tsx
index 39fa2d67..e3f88d62 100644
--- a/app/components/items/cards/item-top-card.tsx
+++ b/app/components/items/cards/item-top-card.tsx
@@ -81,7 +81,7 @@ function ItemTopCard({
                 ? `/album/${album.id}?highlighted-track-id=${id}`
                 : `/${artists ? 'album' : 'artist'}/${id}`
             }
-            className="text-2xl"
+            className="max-w-[260px] text-2xl"
           />
 
           {artists && <ItemArtists artists={artists} className="text-xl" />}
diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx
index 031cb318..af14df2a 100644
--- a/app/components/items/list/items-list.tsx
+++ b/app/components/items/list/items-list.tsx
@@ -84,7 +84,7 @@ function ItemsList({
             </div>
           </div>
 
-          <Carousel className="max-w-[60vw] self-center sm:max-w-[300px] md:hidden">
+          <Carousel className="max-w-[70vw] self-center sm:max-w-[300px] md:hidden">
             <CarouselContent>
               {carouselItems.slice(0, 3).map(item => (
                 <CarouselItem key={item.id}>
diff --git a/app/components/items/misc/item-name.tsx b/app/components/items/misc/item-name.tsx
index e52dce14..ce7bcf38 100644
--- a/app/components/items/misc/item-name.tsx
+++ b/app/components/items/misc/item-name.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import type { AlbumEntity } from '@app/api/types'
 import { LinkButton } from '@app/components/common/buttons'
 import { cn } from '@app/utils/cn'
-import type { AlbumEntity } from '@app/api/types'
 
 namespace ItemName {
   export type Props = Readonly<
diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx
index 3b7b0091..55e156db 100644
--- a/app/components/ui/carousel.tsx
+++ b/app/components/ui/carousel.tsx
@@ -210,7 +210,7 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         'absolute h-8 w-8 rounded-full hover:bg-white',
         orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
+          ? '-left-12 top-1/3 -translate-y-1/2'
           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}
@@ -239,7 +239,7 @@ const CarouselNext = React.forwardRef<
       className={cn(
         'absolute h-8 w-8 rounded-full hover:bg-white',
         orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
+          ? '-right-12 top-1/3 -translate-y-1/2'
           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}
diff --git a/tests/snapshots/item-top-card.spec.tsx.snap b/tests/snapshots/item-top-card.spec.tsx.snap
index 516b31cb..13c95353 100644
--- a/tests/snapshots/item-top-card.spec.tsx.snap
+++ b/tests/snapshots/item-top-card.spec.tsx.snap
@@ -35,7 +35,7 @@ exports[`ItemTopCard > should match snapshot as album 1`] = `
               href="/artist/undefined"
             >
               <p
-                class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Album 1
               </p>
@@ -83,7 +83,7 @@ exports[`ItemTopCard > should match snapshot as album 1`] = `
             href="/artist/undefined"
           >
             <p
-              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Album 1
             </p>
@@ -188,7 +188,7 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = `
               href="/artist/123"
             >
               <p
-                class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Darkthrone
               </p>
@@ -255,7 +255,7 @@ exports[`ItemTopCard > should match snapshot as artist 1`] = `
             href="/artist/123"
           >
             <p
-              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Darkthrone
             </p>
@@ -379,7 +379,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Track 1
               </p>
@@ -532,7 +532,7 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Track 1
             </p>
@@ -742,7 +742,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Track 1
               </p>
@@ -901,7 +901,7 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Track 1
             </p>
@@ -1117,7 +1117,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
               href="/album/undefined?highlighted-track-id=123"
             >
               <p
-                class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Track 1
               </p>
@@ -1173,7 +1173,7 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
             href="/album/undefined?highlighted-track-id=123"
           >
             <p
-              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Track 1
             </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Track 1
               </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Track 1
             </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
               >
                 Track 1
               </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
             >
               Track 1
             </p>
diff --git a/tests/snapshots/items-list.spec.tsx.snap b/tests/snapshots/items-list.spec.tsx.snap
index c9f32833..2c8c9c0e 100644
--- a/tests/snapshots/items-list.spec.tsx.snap
+++ b/tests/snapshots/items-list.spec.tsx.snap
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -940,7 +940,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+          class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -1543,7 +1543,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+        class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Track 1
                     </p>
@@ -2872,7 +2872,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+          class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Track 1
                   </p>
@@ -3475,7 +3475,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+        class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
           disabled=""
         >
           <svg
@@ -4801,7 +4801,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/2"
                   >
                     <p
-                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Darkthrone
                     </p>
@@ -4962,7 +4962,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/123"
                   >
                     <p
-                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Darkthrone
                     </p>
@@ -5121,7 +5121,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                     href="/artist/3"
                   >
                     <p
-                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                      class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                     >
                       Darkthrone
                     </p>
@@ -5262,7 +5262,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
         </div>
         <div
           aria-roledescription="carousel"
-          class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+          class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden"
           role="region"
         >
           <div
@@ -5307,7 +5307,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/123"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -5468,7 +5468,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/2"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -5635,7 +5635,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                         href="/artist/3"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
             disabled=""
           >
             <svg
@@ -5971,7 +5971,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/2"
                 >
                   <p
-                    class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Darkthrone
                   </p>
@@ -6132,7 +6132,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/123"
                 >
                   <p
-                    class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Darkthrone
                   </p>
@@ -6291,7 +6291,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                   href="/artist/3"
                 >
                   <p
-                    class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                    class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                   >
                     Darkthrone
                   </p>
@@ -6432,7 +6432,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
       </div>
       <div
         aria-roledescription="carousel"
-        class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+        class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden"
         role="region"
       >
         <div
@@ -6477,7 +6477,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/123"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -6638,7 +6638,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/2"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -6805,7 +6805,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
                       href="/artist/3"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 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 b4821a5c..f694c48e 100644
--- a/tests/snapshots/items-section.spec.tsx.snap
+++ b/tests/snapshots/items-section.spec.tsx.snap
@@ -59,7 +59,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/2"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -220,7 +220,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/123"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -379,7 +379,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                         href="/artist/3"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Darkthrone
                         </p>
@@ -520,7 +520,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
             </div>
             <div
               aria-roledescription="carousel"
-              class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+              class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden"
               role="region"
             >
               <div
@@ -565,7 +565,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/123"
                           >
                             <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Darkthrone
                             </p>
@@ -726,7 +726,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/2"
                           >
                             <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Darkthrone
                             </p>
@@ -893,7 +893,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                             href="/artist/3"
                           >
                             <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Darkthrone
                             </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -1249,7 +1249,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/2"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -1410,7 +1410,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/123"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -1569,7 +1569,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                       href="/artist/3"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Darkthrone
                       </p>
@@ -1710,7 +1710,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
           </div>
           <div
             aria-roledescription="carousel"
-            class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+            class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden"
             role="region"
           >
             <div
@@ -1755,7 +1755,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/123"
                         >
                           <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Darkthrone
                           </p>
@@ -1916,7 +1916,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/2"
                         >
                           <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Darkthrone
                           </p>
@@ -2083,7 +2083,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
                           href="/artist/3"
                         >
                           <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Darkthrone
                           </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg
@@ -2663,7 +2663,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=2"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2813,7 +2813,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=123"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -2961,7 +2961,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                         href="/album/undefined?highlighted-track-id=3"
                       >
                         <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                          class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                         >
                           Track 1
                         </p>
@@ -3091,7 +3091,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
             </div>
             <div
               aria-roledescription="carousel"
-              class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+              class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Track 1
                             </p>
@@ -3286,7 +3286,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                             href="/album/undefined?highlighted-track-id=2"
                           >
                             <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Track 1
                             </p>
@@ -3442,7 +3442,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                             href="/album/undefined?highlighted-track-id=3"
                           >
                             <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                              class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                             >
                               Track 1
                             </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
                 disabled=""
               >
                 <svg
@@ -3688,7 +3688,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=2"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3838,7 +3838,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=123"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -3986,7 +3986,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                       href="/album/undefined?highlighted-track-id=3"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                       >
                         Track 1
                       </p>
@@ -4116,7 +4116,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
           </div>
           <div
             aria-roledescription="carousel"
-            class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
+            class="relative max-w-[70vw] self-center sm:max-w-[300px] 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-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Track 1
                           </p>
@@ -4311,7 +4311,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           href="/album/undefined?highlighted-track-id=2"
                         >
                           <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Track 1
                           </p>
@@ -4467,7 +4467,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
                           href="/album/undefined?highlighted-track-id=3"
                         >
                           <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                            class="truncate sm:max-w-[240px] xl:max-w-[340px] max-w-[260px] text-2xl"
                           >
                             Track 1
                           </p>
@@ -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-12 top-1/2 -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-12 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-12 top-1/2 -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-12 top-1/3 -translate-y-1/2"
               disabled=""
             >
               <svg