wallpaper: the preview above the list

The mock screens took a third of the width beside the list, which left
both cramped in the settings window. They now sit on top, sized to half
the width and capped so the upright screen stays under 200px, with the
notes and the actions beside them; the folder list takes the full width
and the rest of the height below. The actions are a Flow, so they wrap
instead of clipping in a narrow window.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2 files changed, 108 insertions, 111 deletions

diff --git a/desktop/modules/appearance/README.md b/desktop/modules/appearance/README.md
index 2863184..51e5f09 100644
--- a/desktop/modules/appearance/README.md
+++ b/desktop/modules/appearance/README.md
@@ -66,7 +66,7 @@ waybar-theme-udt's `install.sh` or signals waybar.
 
 Clicking a thumbnail **stages** it rather than setting it, so both screens can
 be composed before anything changes, and Apply then makes a single
-`wallp --set H=… V=…` call. The mock screens on the right show what the desk
+`wallp --set H=… V=…` call. The mock screens above the list show what the desk
 would look like: the staged pick where there is one, what is currently set
 where there is not, and the hovered thumbnail on the targeted screen while the
 pointer is over it.
diff --git a/desktop/modules/appearance/WallpaperTab.qml b/desktop/modules/appearance/WallpaperTab.qml
index 72d4dfe..9788ba2 100644
--- a/desktop/modules/appearance/WallpaperTab.qml
+++ b/desktop/modules/appearance/WallpaperTab.qml
@@ -14,11 +14,11 @@ import QtQuick
 import "../.."
 
 // Wallpapers by folder, staged per screen and set together with Apply, beside
-// a mock of the two screens. Sized by its host: the thumbnail list scrolls
+// a mock of the two screens above them. Sized by its host: the thumbnail list scrolls
 // itself, so it needs a height rather than the page's scroll.
-Row {
+Column {
     id: tab
-    spacing: 20
+    spacing: 16
 
     // What the mock screens show. Hovering a thumbnail previews it on the
     // targeted screen; the other keeps whatever is currently set.
@@ -36,9 +36,111 @@ Row {
         }
     }
 
+    // The two screens as they sit on the desk: DP-3 rotated upright on
+    // the left, DP-1 wide on the right, centred against each other the
+    // way Hyprland has them. Hovering a thumbnail fills the screen it
+    // would be set on; the other keeps what is on it now. Beside them,
+    // what the image under consideration will look like, and the actions.
+    Item {
+        id: mockPane
+        width: parent.width
+        height: screens.height
+
+        // Half the width for the two panels side by side plus the gap,
+        // capped so the upright DP-3 stays under 200px and the list keeps
+        // the room; the bezels and stands are drawn outside that.
+        readonly property real scale: Math.min(width * 0.5 / (1080 + 2560 + 160), 200 / 1920)
+
+        Row {
+            id: screens
+            spacing: Math.round(160 * mockPane.scale)
+
+            MockScreen {
+                anchors.verticalCenter: parent.verticalCenter
+                label: "DP-3"
+                targeted: Wallpapers.target === "V"
+                source: (targeted && tab.hovering !== "")
+                        ? tab.hovering : Wallpapers.shown("V")
+                // DP-3 has transform=1, so it stands upright.
+                panelWidth: Math.round(1080 * mockPane.scale)
+                panelHeight: Math.round(1920 * mockPane.scale)
+            }
+
+            MockScreen {
+                anchors.verticalCenter: parent.verticalCenter
+                label: "DP-1"
+                targeted: Wallpapers.target === "H"
+                source: (targeted && tab.hovering !== "")
+                        ? tab.hovering : Wallpapers.shown("H")
+                panelWidth: Math.round(2560 * mockPane.scale)
+                panelHeight: Math.round(1080 * mockPane.scale)
+            }
+        }
+
+        Column {
+            anchors { left: screens.right; leftMargin: 24; right: parent.right; verticalCenter: parent.verticalCenter }
+            spacing: 10
+
+            Text {
+                width: parent.width
+                wrapMode: Text.Wrap
+                text: tab.hovering !== "" ? Wallpapers.label(tab.hovering)
+                    : Wallpapers.dirty ? "click Apply to set"
+                    : "click a wallpaper to stage it"
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                color: Theme.overlay
+            }
+
+            // Why the image under consideration, hovered or else the
+            // one staged for the target screen, will look worse than
+            // its thumbnail.
+            Text {
+                readonly property string subject: tab.hovering !== "" ? tab.hovering
+                    : Wallpapers.target === "V" ? Wallpapers.pendingV : Wallpapers.pendingH
+                width: parent.width
+                visible: text !== ""
+                wrapMode: Text.Wrap
+                text: subject !== "" ? Wallpapers.qualityNote(subject, Wallpapers.target) : ""
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+                color: Wallpapers.qualityColor(subject, Wallpapers.target)
+            }
+
+            // A Flow, not a Row: a Row overflows its width and clipped the
+            // last button in a narrow window (AGENTS.md).
+            Flow {
+                width: parent.width
+                spacing: 8
+
+                Tab {
+                    text: Wallpapers.applying ? "applying…" : "Apply"
+                    selected: Wallpapers.dirty && !Wallpapers.applying
+                    enabled: Wallpapers.dirty && !Wallpapers.applying
+                    onClicked: Wallpapers.apply()
+                }
+                Tab {
+                    text: "Reset"
+                    enabled: Wallpapers.dirty && !Wallpapers.applying
+                    onClicked: Wallpapers.clearPending()
+                }
+                // wallhaven-dl searches wallhaven.cc and finds larger
+                // copies of low-res wallpapers. Launched through its
+                // desktop entry, which needs no ~/bin on quickshell's PATH
+                // and keeps the app's own taskbar icon. The window closes
+                // so the app is not opened underneath it.
+                Tab {
+                    text: "Open wallhaven-dl"
+                    onClicked: {
+                        Quickshell.execDetached(["gtk-launch", "wallhaven-dl"]);
+                        tab.dismiss();
+                    }
+                }
+            }
+        }
+    }
+
     Column {
-        width: parent.width - mockPane.width - parent.spacing
-        height: parent.height
+        width: parent.width
+        height: parent.height - mockPane.height - parent.spacing
         spacing: 12
 
         Text {
@@ -249,109 +351,4 @@ Row {
             }
         }
     }
-
-    // The two screens as they sit on the desk: DP-3 rotated upright on
-    // the left, DP-1 wide on the right, centred against each other the
-    // way Hyprland has them. Hovering a thumbnail fills the screen it
-    // would be set on; the other keeps what is on it now.
-    Item {
-        id: mockPane
-        // A third of the panel rather than a fixed width, so the
-        // preview keeps its share when the panel is resized.
-        width: Math.round(parent.width * 0.33)
-        height: parent.height
-
-        // Divisor is the two panels side by side plus the gap; the
-        // bezels and stands are drawn outside that, hence the margin.
-        readonly property real scale: (width * 0.92) / (1080 + 2560 + 160)
-
-        Column {
-            anchors.centerIn: parent
-            spacing: 14
-
-            Row {
-                spacing: Math.round(160 * mockPane.scale)
-
-                MockScreen {
-                    anchors.verticalCenter: parent.verticalCenter
-                    label: "DP-3"
-                    targeted: Wallpapers.target === "V"
-                    source: (targeted && tab.hovering !== "")
-                            ? tab.hovering : Wallpapers.shown("V")
-                    // DP-3 has transform=1, so it stands upright.
-                    panelWidth: Math.round(1080 * mockPane.scale)
-                    panelHeight: Math.round(1920 * mockPane.scale)
-                }
-
-                MockScreen {
-                    anchors.verticalCenter: parent.verticalCenter
-                    label: "DP-1"
-                    targeted: Wallpapers.target === "H"
-                    source: (targeted && tab.hovering !== "")
-                            ? tab.hovering : Wallpapers.shown("H")
-                    panelWidth: Math.round(2560 * mockPane.scale)
-                    panelHeight: Math.round(1080 * mockPane.scale)
-                }
-            }
-
-            Text {
-                anchors.horizontalCenter: parent.horizontalCenter
-                width: mockPane.width
-                horizontalAlignment: Text.AlignHCenter
-                wrapMode: Text.Wrap
-                text: tab.hovering !== "" ? Wallpapers.label(tab.hovering)
-                    : Wallpapers.dirty ? "click Apply to set"
-                    : "click a wallpaper to stage it"
-                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
-                color: Theme.overlay
-            }
-
-            // Why the image under consideration, hovered or else the
-            // one staged for the target screen, will look worse than
-            // its thumbnail.
-            Text {
-                readonly property string subject: tab.hovering !== "" ? tab.hovering
-                    : Wallpapers.target === "V" ? Wallpapers.pendingV : Wallpapers.pendingH
-                anchors.horizontalCenter: parent.horizontalCenter
-                width: mockPane.width
-                visible: text !== ""
-                horizontalAlignment: Text.AlignHCenter
-                wrapMode: Text.Wrap
-                text: subject !== "" ? Wallpapers.qualityNote(subject, Wallpapers.target) : ""
-                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
-                color: Wallpapers.qualityColor(subject, Wallpapers.target)
-            }
-
-            // wallhaven-dl searches wallhaven.cc and finds larger
-            // copies of low-res wallpapers. Launched through its
-            // desktop entry, which needs no ~/bin on quickshell's PATH
-            // and keeps the app's own taskbar icon. The panel closes
-            // so the app window is not opened under the overlay.
-            Tab {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: "Open wallhaven-dl"
-                onClicked: {
-                    Quickshell.execDetached(["gtk-launch", "wallhaven-dl"]);
-                    tab.dismiss();
-                }
-            }
-
-            Row {
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 8
-
-                Tab {
-                    text: Wallpapers.applying ? "applying…" : "Apply"
-                    selected: Wallpapers.dirty && !Wallpapers.applying
-                    enabled: Wallpapers.dirty && !Wallpapers.applying
-                    onClicked: Wallpapers.apply()
-                }
-                Tab {
-                    text: "Reset"
-                    enabled: Wallpapers.dirty && !Wallpapers.applying
-                    onClicked: Wallpapers.clearPending()
-                }
-            }
-        }
-    }
 }