From 1089761e74a34158c62b651fb77a8945653659c4 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 18 May 2026 20:36:04 -0600
Subject: [PATCH] fix(slint): widen the album/artist description area

Move the album description and the artist biography out of the metadata
column to span the full content width below the header block, so the
text is no longer cramped into the narrow column beside the artwork.

cc
---
 crates/qbz-slint/ui/album/AlbumPageView.slint | 56 +++++++++----------
 .../qbz-slint/ui/artist/ArtistPageView.slint  | 19 ++++---
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/crates/qbz-slint/ui/album/AlbumPageView.slint b/crates/qbz-slint/ui/album/AlbumPageView.slint
index f7332d1f8..864be0642 100644
--- a/crates/qbz-slint/ui/album/AlbumPageView.slint
+++ b/crates/qbz-slint/ui/album/AlbumPageView.slint
@@ -391,35 +391,6 @@ export component AlbumPageView inherits Rectangle {
                         overflow: elide;
                     }
 
-                    // Editorial description — a pre-truncated short string
-                    // (so it naturally wraps to a couple of lines without
-                    // overflowing), with a Read more link to the full modal.
-                    if AlbumState.description != "": Rectangle { height: 10px; }
-                    if AlbumState.description != "": Text {
-                        text: AlbumState.description-short;
-                        color: Theme.text-secondary;
-                        font-size: Typography.legal;
-                        wrap: word-wrap;
-                    }
-                    if AlbumState.description != AlbumState.description-short: read-more := TouchArea {
-                        width: read-more-row.preferred-width;
-                        height: 22px;
-                        mouse-cursor: pointer;
-                        clicked => {
-                            root.show-description = true;
-                        }
-                        read-more-row := HorizontalLayout {
-                            Text {
-                                text: @tr("Read more");
-                                color: read-more.has-hover
-                                    ? Theme.accent-hover
-                                    : Theme.accent;
-                                font-size: Typography.legal;
-                                vertical-alignment: center;
-                            }
-                        }
-                    }
-
                     Rectangle { height: 20px; }
                     HorizontalLayout {
                         alignment: start;
@@ -473,6 +444,33 @@ export component AlbumPageView inherits Rectangle {
                 }
             }
 
+            // Editorial description — full content width, pre-truncated so
+            // it wraps cleanly, with a Read more link to the full modal.
+            if AlbumState.description != "": Rectangle { height: 18px; }
+            if AlbumState.description != "": Text {
+                text: AlbumState.description-short;
+                color: Theme.text-secondary;
+                font-size: Typography.body;
+                wrap: word-wrap;
+            }
+            if AlbumState.description != AlbumState.description-short: Rectangle { height: 4px; }
+            if AlbumState.description != AlbumState.description-short: read-more := TouchArea {
+                width: read-more-row.preferred-width;
+                height: 22px;
+                mouse-cursor: pointer;
+                clicked => {
+                    root.show-description = true;
+                }
+                read-more-row := HorizontalLayout {
+                    Text {
+                        text: @tr("Read more");
+                        color: read-more.has-hover ? Theme.accent-hover : Theme.accent;
+                        font-size: Typography.legal;
+                        vertical-alignment: center;
+                    }
+                }
+            }
+
             Rectangle { height: 20px; }
             Rectangle {
                 height: 1px;
diff --git a/crates/qbz-slint/ui/artist/ArtistPageView.slint b/crates/qbz-slint/ui/artist/ArtistPageView.slint
index bb5881376..eb17f3bb1 100644
--- a/crates/qbz-slint/ui/artist/ArtistPageView.slint
+++ b/crates/qbz-slint/ui/artist/ArtistPageView.slint
@@ -251,15 +251,7 @@ export component ArtistPageView inherits Rectangle {
                         font-weight: Typography.bold;
                         overflow: elide;
                     }
-                    Rectangle { height: 12px; }
-                    Text {
-                        text: ArtistState.bio;
-                        visible: ArtistState.bio != "";
-                        color: Theme.text-secondary;
-                        font-size: Typography.body;
-                        wrap: word-wrap;
-                    }
-                    Rectangle { height: 20px; }
+                    Rectangle { height: 18px; }
                     HorizontalLayout {
                         alignment: start;
                         spacing: 12px;
@@ -288,6 +280,15 @@ export component ArtistPageView inherits Rectangle {
                 }
             }
 
+            // Biography — full content width, below the header block.
+            if ArtistState.bio != "": Rectangle { height: 20px; }
+            if ArtistState.bio != "": Text {
+                text: ArtistState.bio;
+                color: Theme.text-secondary;
+                font-size: Typography.body;
+                wrap: word-wrap;
+            }
+
             Rectangle { height: 36px; }
 
             if ArtistState.loading && ArtistState.top-tracks.length == 0: Text {