From 227909787db581a51865a3979b118c1b0b47216f Mon Sep 17 00:00:00 2001
From: Gustavo Moreno <gustavo.moreno.fernandez@gmail.com>
Date: Wed, 26 Feb 2025 15:03:33 +0100
Subject: [PATCH] bug #2344: Bottom Overflow in Browse

- Added a width adjustment (`w`) for desktop screens
- Limited the number of lines for the genre name to 1 (`maxLines: 1`) to prevent overflow

This commit only fixes the issue in Browse. The overflow in Local Library is not addressed here.

Partially fixes #2344
---
 .../sections/genres/genre_card_playlist_card.dart   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/lib/modules/home/sections/genres/genre_card_playlist_card.dart b/lib/modules/home/sections/genres/genre_card_playlist_card.dart
index 1e1b3b76..72142de4 100644
--- a/lib/modules/home/sections/genres/genre_card_playlist_card.dart
+++ b/lib/modules/home/sections/genres/genre_card_playlist_card.dart
@@ -8,6 +8,7 @@ import 'package:spotube/components/image/universal_image.dart';
 import 'package:spotube/extensions/image.dart';
 import 'package:spotube/extensions/string.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
+import 'package:spotube/utils/platform.dart';
 import 'package:stroke_text/stroke_text.dart';
 
 class GenreSectionCardPlaylistCard extends HookConsumerWidget {
@@ -21,8 +22,10 @@ class GenreSectionCardPlaylistCard extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
 
+    final w = kIsDesktop ? 20 : 0;
+
     return Container(
-      width: 115 * theme.scaling,
+      width: (115 + w) * theme.scaling,
       decoration: BoxDecoration(
         color: theme.colorScheme.background.withAlpha(75),
         borderRadius: theme.borderRadiusMd,
@@ -65,7 +68,7 @@ class GenreSectionCardPlaylistCard extends HookConsumerWidget {
                               ref.watch(playlistImageProvider(playlist.id!));
                           return SizedBox(
                             height: 100 * theme.scaling,
-                            width: 100 * theme.scaling,
+                            width: (100 + w) * theme.scaling,
                             child: Stack(
                               children: [
                                 Positioned.fill(
@@ -107,14 +110,14 @@ class GenreSectionCardPlaylistCard extends HookConsumerWidget {
                         ),
                         fit: BoxFit.cover,
                         height: 100 * theme.scaling,
-                        width: 100 * theme.scaling,
+                        width: (100 + w) * theme.scaling,
                       ),
               ),
               Text(
                 playlist.name!,
-                maxLines: 2,
+                maxLines: 1,
                 overflow: TextOverflow.ellipsis,
-              ).semiBold().small(),
+              ).xSmall().bold(),
               if (playlist.description != null)
                 Text(
                   playlist.description?.unescapeHtml().cleanHtml() ?? "",