fix(components/items/card/top-item): item name and progress bar width

Rigtch · Dec 5, 2024 · 042b694 · 042b694
1 parent 2bd3c61
commit 042b694
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/app/components/common/progress-with-value-label.tsx b/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(

diff --git a/app/components/items/cards/item-top-card.tsx b/app/components/items/cards/item-top-card.tsx
@@ -81,17 +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="flex h-full flex-col flex-wrap justify-center gap-2 md: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} />
               ))}
@@ -108,6 +108,7 @@ function ItemTopCard({
                 value={plays}
                 max={maxPlays}
                 label={`${plays} ${plays > 1 ? 'plays' : 'play'}`}
+                className="max-w-[350px]"
                 animate
               />
             )}

diff --git 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-full self-center sm:min-w-[500px] md:hidden">
+          <Carousel className="max-w-full self-center sm:min-w-[500px] sm:max-w-[600px] md:hidden">
             <CarouselContent>
               {carouselItems.slice(0, 3).map(item => (
                 <CarouselItem key={item.id}>

diff --git 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-0 top-1/3 -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-0 top-1/3 -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
       )}