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

app/components/common/progress-with-value-label.tsx

@@ -11,6 +11,7 @@ namespace ProgressWithValueLabel {
     max: number
     label: string
     animate?: boolean
+    className?: string
   }>
 }
 
@@ -19,6 +20,7 @@ function ProgressWithValueLabel({
   max,
   label,
   animate = false,
+  className,
 }: ProgressWithValueLabel.Props) {
   const defaultProgressValue = (value / max) * 100
 
@@ -34,7 +36,7 @@ function ProgressWithValueLabel({
   }, [value, max, animate, defaultProgressValue])
 
   return (
-    <div className="relative w-full">
+    <div className={cn('relative w-full', className)}>
       <Progress
         value={progressValue}
         className={cn(

app/components/items/cards/item-top-card.tsx

@@ -81,22 +81,17 @@ function ItemTopCard({
                 ? `/album/${album.id}?highlighted-track-id=${id}`
                 : `/${artists ? 'album' : 'artist'}/${id}`
             }
-            className="text-2xl"
+            className="max-w-[90vw] text-2xl"
           />
 
           {artists && <ItemArtists artists={artists} className="text-xl" />}
         </div>
 
-        <div className="flex w-full flex-col items-center justify-center gap-4">
+        <div className="flex w-full max-w-[90vw] flex-col items-center justify-center gap-4">
           {position && <ItemPosition position={position} size="xl" />}
 
           {genres && genres.length > 0 && (
-            <div
-              className={cn(
-                'flex h-full flex-wrap justify-center gap-2',
-                isCarousel ? 'flex-col' : 'flex-row'
-              )}
-            >
+            <div className="flex h-full flex-row flex-wrap justify-center gap-2">
               {genres.slice(0, 3).map((genre, index) => (
                 <GenreBadge key={index} genre={genre} />
               ))}
@@ -113,6 +108,7 @@ function ItemTopCard({
                 value={plays}
                 max={maxPlays}
                 label={`${plays} ${plays > 1 ? 'plays' : 'play'}`}
+                className="max-w-[350px]"
                 animate
               />
             )}

app/components/items/list/items-list.tsx

@@ -73,7 +73,7 @@ function ItemsList({
           <div className="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24">
             <div className="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row">
               {sortedItems.slice(0, 2).map(item => (
-                <ItemTopCard {...item} key={item.id} />
+                <ItemTopCard {...item} className="w-1/2" key={item.id} />
               ))}
             </div>
 
@@ -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-full self-center sm:min-w-[500px] sm:max-w-[550px] 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<
@@ -15,7 +15,7 @@ function ItemName({ name, href, className }: ItemName.Props) {
     <LinkButton href={href} className="flex justify-start">
       <p
         className={cn(
-          'max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px]',
+          'max-w-[400px] truncate md:max-w-[250px] xl:max-w-[350px]',
           className
         )}
       >

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-2 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-2 top-1/3 -translate-y-1/2'
           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}