From cb7c0341d63ae73e01fb8248a419154889e88ccd Mon Sep 17 00:00:00 2001
From: Mnigos <makowskiigor@gmail.com>
Date: Thu, 5 Dec 2024 15:27:12 +0100
Subject: [PATCH] fix(components/items/card/top-item): item name and progress
 bar width

---
 app/components/common/progress-with-value-label.tsx | 4 +++-
 app/components/items/cards/item-top-card.tsx        | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/common/progress-with-value-label.tsx b/app/components/common/progress-with-value-label.tsx
index 257e9f2d..41b9dc92 100644
--- 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
index 69ed8f0f..04ffae08 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-[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
               />
             )}