quaik8/sdb-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust gap spacing in SoundboardPage layout for improved responsiveness
Some checks failed
Frontend CI / lint (push) Failing after 5m5s
Details
Frontend CI / build (push) Has been skipped
Details

Browse Source
This commit is contained in:
JSC
2025-07-19 08:40:05 +02:00
parent 89a10e0988
commit 5dd82b7833
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/DashboardPage.tsx
View File

@@ -251,7 +251,7 @@ export function DashboardPage() {
<Volume2 className="h-5 w-5 text-white" />
</div>
<h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.sounds.textGradient} bg-clip-text text-transparent`}>
Played Sounds
Sounds
</h2>
</div>
@@ -262,8 +262,8 @@ export function DashboardPage() {
key={sound.id}
className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.sounds.itemBg} border ${colors.sounds.itemBorder} rounded-lg ${colors.sounds.itemHover} transition-colors`}
>
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
<div className="flex items-center space-x-3 min-w-0 flex-1">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -271,9 +271,9 @@ export function DashboardPage() {
}`}>
{index + 1}
</div>
<div>
<div className="font-medium">{sound.name}</div>
<div className="text-sm text-muted-foreground">
<div className="min-w-0 flex-1">
<div className="font-medium truncate">{sound.name}</div>
<div className="text-sm text-muted-foreground truncate">
{sound.filename}
</div>
</div>
@@ -301,7 +301,7 @@ export function DashboardPage() {
<Music className="h-5 w-5 text-white" />
</div>
<h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.tracks.textGradient} bg-clip-text text-transparent`}>
Played Tracks
Tracks
</h2>
</div>
@@ -312,8 +312,8 @@ export function DashboardPage() {
key={track.id}
className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.tracks.itemBg} border ${colors.tracks.itemBorder} rounded-lg ${colors.tracks.itemHover} transition-colors`}
>
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
<div className="flex items-center space-x-3 min-w-0 flex-1">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -321,9 +321,9 @@ export function DashboardPage() {
}`}>
{index + 1}
</div>
<div>
<div className="font-medium">{track.name}</div>
<div className="text-sm text-muted-foreground">
<div className="min-w-0 flex-1">
<div className="font-medium truncate">{track.name}</div>
<div className="text-sm text-muted-foreground truncate">
{track.filename}
</div>
</div>
@@ -351,7 +351,7 @@ export function DashboardPage() {
<Users className="h-5 w-5 text-white" />
</div>
<h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.playlists.textGradient} bg-clip-text text-transparent`}>
Top Users
Users
</h2>
</div>
@@ -362,8 +362,8 @@ export function DashboardPage() {
key={user.id}
className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.playlists.itemBg} border ${colors.playlists.itemBorder} rounded-lg ${colors.playlists.itemHover} transition-colors`}
>
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${
<div className="flex items-center space-x-3 min-w-0 flex-1">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
@@ -371,17 +371,17 @@ export function DashboardPage() {
}`}>
{index + 1}
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 min-w-0 flex-1">
{user.picture && (
<img
src={user.picture}
alt={user.name}
className="w-8 h-8 rounded-full border-2 border-white shadow-sm"
className="w-8 h-8 rounded-full border-2 border-white shadow-sm shrink-0"
/>
)}
<div>
<div className="font-medium">{user.name}</div>
<div className="text-sm text-muted-foreground">
<div className="min-w-0 flex-1">
<div className="font-medium truncate">{user.name}</div>
<div className="text-sm text-muted-foreground truncate">
{user.email}
</div>
</div>

2
src/pages/SoundboardPage.tsx
View File

@@ -269,7 +269,7 @@ export function SoundboardPage() {
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
{filteredSounds.map((sound, idx) => (
<SoundCard
key={sound.id}