From 79d9bd7f76b98ac0296a406536ce08448822e33b Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Mon, 22 Sep 2025 20:43:09 +0200
Subject: [PATCH] feat: update SoundCard styling and adjust layout in
 SoundsPage for better responsiveness

---
 src/components/sounds/SoundCard.tsx | 4 ++--
 src/pages/SoundsPage.tsx            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/sounds/SoundCard.tsx b/src/components/sounds/SoundCard.tsx
index c2f533e..c23c481 100644
--- a/src/components/sounds/SoundCard.tsx
+++ b/src/components/sounds/SoundCard.tsx
@@ -53,7 +53,7 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
         {/* Type badge */}
         <Badge
           variant={getBadgeVariant(sound.type)}
-          className="absolute top-2 left-2 text-xs px-1.5 py-0.5 h-5"
+          className="absolute top-2 left-2 text-xs px-1 py-0 h-4 text-[10px]"
         >
           {sound.type}
         </Badge>
@@ -79,7 +79,7 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
           />
         </button>
 
-        <h3 className="font-medium text-s truncate pl-12 pr-8">{sound.name}</h3>
+        <h3 className="font-medium text-s truncate pl-8 pr-6">{sound.name}</h3>
         <div className="grid grid-cols-2 gap-1 text-xs text-muted-foreground">
           <div className="flex">
             <Clock className="h-3.5 w-3.5 mr-0.5" />
diff --git a/src/pages/SoundsPage.tsx b/src/pages/SoundsPage.tsx
index 73fb794..bc7d256 100644
--- a/src/pages/SoundsPage.tsx
+++ b/src/pages/SoundsPage.tsx
@@ -307,7 +307,7 @@ export function SoundsPage() {
     }
 
     return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
         {sounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}