From 227909787db581a51865a3979b118c1b0b47216f Mon Sep 17 00:00:00 2001 From: Gustavo Moreno Date: Wed, 26 Feb 2025 15:03:33 +0100 Subject: [PATCH 1/2] 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() ?? "", From 9163f1abe0f43f5e157ba8dfeaaae04adffaca5c Mon Sep 17 00:00:00 2001 From: Gustavo Moreno Date: Wed, 26 Feb 2025 16:14:55 +0100 Subject: [PATCH 2/2] bug 2344: Bottom Overflow in Browse & Local Library on Desktop - Wrapped `Wrap` in `Flexible` to prevent overflow issues inside `Stack` - Now the folder path text adapts better to different screen sizes - Improved overall UI consistency and responsiveness Tested visually only on **Linux Desktop** Fixes #2344 https://github.com/KRTirtho/spotube/issues/2344 --- .../local_folder/local_folder_item.dart | 162 +++++++++--------- 1 file changed, 85 insertions(+), 77 deletions(-) diff --git a/lib/modules/library/local_folder/local_folder_item.dart b/lib/modules/library/local_folder/local_folder_item.dart index 78f1aa14..4394693b 100644 --- a/lib/modules/library/local_folder/local_folder_item.dart +++ b/lib/modules/library/local_folder/local_folder_item.dart @@ -99,91 +99,99 @@ class LocalFolderItem extends HookConsumerWidget { itemCount: tracks.length, itemBuilder: (context, index) { final track = tracks[index]; - return UniversalImage( - path: (track.album?.images).asUrlString( - placeholder: ImagePlaceholder.albumArt, + return Expanded( + child: UniversalImage( + path: (track.album?.images).asUrlString( + placeholder: ImagePlaceholder.albumArt, + ), + fit: BoxFit.cover, ), - fit: BoxFit.cover, ); }, ), ), const Gap(8), - Stack( - children: [ - Column( - mainAxisSize: MainAxisSize.min, - children: [ - Center( - child: Text( - isDownloadFolder - ? context.l10n.downloads - : isCacheFolder - ? context.l10n.cache_folder.capitalize() - : basename(folder), - style: const TextStyle(fontWeight: FontWeight.bold), - textAlign: TextAlign.center, - maxLines: 1, - overflow: TextOverflow.ellipsis, + Expanded( + child: Stack( + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Center( + child: Flexible( + child: Text( + isDownloadFolder + ? context.l10n.downloads + : isCacheFolder + ? context.l10n.cache_folder.capitalize() + : basename(folder), + style: const TextStyle(fontWeight: FontWeight.bold), + textAlign: TextAlign.center, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + ), + Flexible( + child: Wrap( + spacing: 2, + runSpacing: 2, + children: [ + for (final MapEntry(key: index, value: segment) + in segments.asMap().entries) + Text.rich( + TextSpan( + children: [ + if (index != 0) const TextSpan(text: "/ "), + TextSpan(text: segment) + ], + ), + maxLines: 2, + ).xSmall().muted(), + ], + ), + ), + ], + ), + if (!isDownloadFolder && !isCacheFolder) + Align( + alignment: Alignment.topRight, + child: IconButton.ghost( + icon: const Icon(Icons.more_vert), + size: ButtonSize.small, + onPressed: () { + showDropdown( + context: context, + builder: (context) { + return DropdownMenu( + children: [ + MenuButton( + leading: Icon(SpotubeIcons.folderRemove, + color: colorScheme.destructive), + child: Text( + context.l10n.remove_library_location), + onPressed: (context) { + final libraryLocations = ref + .read(userPreferencesProvider) + .localLibraryLocation; + ref + .read(userPreferencesProvider.notifier) + .setLocalLibraryLocation( + libraryLocations + .where((e) => e != folder) + .toList(), + ); + }, + ) + ], + ); + }, + ); + }, ), ), - Wrap( - spacing: 2, - runSpacing: 2, - children: [ - for (final MapEntry(key: index, value: segment) - in segments.asMap().entries) - Text.rich( - TextSpan( - children: [ - if (index != 0) const TextSpan(text: "/ "), - TextSpan(text: segment), - ], - ), - maxLines: 2, - ).xSmall().muted(), - ], - ), - ], - ), - if (!isDownloadFolder && !isCacheFolder) - Align( - alignment: Alignment.topRight, - child: IconButton.ghost( - icon: const Icon(Icons.more_vert), - size: ButtonSize.small, - onPressed: () { - showDropdown( - context: context, - builder: (context) { - return DropdownMenu( - children: [ - MenuButton( - leading: Icon(SpotubeIcons.folderRemove, - color: colorScheme.destructive), - child: - Text(context.l10n.remove_library_location), - onPressed: (context) { - final libraryLocations = ref - .read(userPreferencesProvider) - .localLibraryLocation; - ref - .read(userPreferencesProvider.notifier) - .setLocalLibraryLocation( - libraryLocations - .where((e) => e != folder) - .toList(), - ); - }, - ) - ], - ); - }, - ); - }, - ), - ), - ], + ], + ), ), const Spacer(), ],