feat(carousel): move arrows up and extend text width

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" />}

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}>

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<

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
       )}