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

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

Hide file tree

Showing 2 changed files with 6 additions and 3 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,7 +81,7 @@ 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" />}
@@ -91,7 +91,7 @@ function ItemTopCard({
           {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
               />
             )}