UI bug: Bottom Overflow in Browse & Local Library on Desktop

[gustamor]

Is there an existing issue for this? (Please read the description)

• I have searched the existing issues

Current Behavior

In the desktop version, some cards in Browse and Local Library have a bottom overflow issue.

Expected Behavior

• Text should either fade out if it overflows the available space
• Or scroll horizontally/vertically if the content is too large
• Any idea from a designer better than me would be welcome

Steps to reproduce

1. Open Spotube in desktop mode
2. Navigate to Browse or Local Library
3. Notice the overflow issue in the cards

Logs

Logs

flutter: │ A RenderFlex overflowed by 14 pixels on the bottom.
flutter: ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
flutter: │ #0   AppLogger.runZoned.<anonymous closure>.<anonymous closure> (package:spotube/services/logger/logger.dart:61:70)
flutter: │ #1   FlutterError.reportError (package:flutter/src/foundation/assertions.dart:1204:14)
flutter: │ #2   DebugOverflowIndicatorMixin._reportOverflow (package:flutter/src/rendering/debug_overflow_indicator.dart:260:18)
flutter: │ #3   DebugOverflowIndicatorMixin.paintOverflowIndicator (package:flutter/src/rendering/debug_overflow_indicator.dart:331:7)
flutter: │ #4   RenderFlex.paint.<anonymous closure> (package:flutter/src/rendering/flex.dart:1362:7)
flutter: │ #5   RenderFlex.paint (package:flutter/src/rendering/flex.dart:1370:6)
flutter: │ #6   RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3371:7)
flutter: │ #7   PaintingContext.paintChild (package:flutter/src/rendering/object.dart:260:13)>

Operating System

Linux (PopOS 76)

Spotube version

dev branch

Installation source

GitHub Releases (Binary)

Additional information

Screenshots

Self grab

• I'm ready to work on this issue!

[gustamor]

Two options so far:

One line for the genre, same with:

One line for the genre, more width: