Let the launch screen scroll, now that it offers three routes

The signed-out screen was a `VerticalLayout { alignment: center }` with
no scroll. That was already tight with two routes; the folder option
made the column taller than a 900x560 window, and a centred layout that
overflows clips at *both* ends — so the masthead and the last route
disappear together, with nothing on screen to suggest either existed.

A Flickable whose viewport follows the content, and a top padding that
centres the column only while it fits. Both cases checked against the
running app: centred at 1000x1800, top-aligned and scrollable at
900x560.
This commit is contained in:
2026-08-29 09:57:52 +02:00
parent 64462e9fd3
commit 6c363cee97
+27 -4
View File
@@ -93,15 +93,37 @@ export component LaunchScreen inherits Rectangle {
init => { self.focus(); }
}
VerticalLayout {
alignment: center;
padding: Theme.gap-lg;
// Scrollable, and it has to be. The signed-out screen offers three routes
// — browser sign-in, an app password, a folder — and the column is taller
// than a laptop window in a side-by-side split, let alone a phone. A
// centred `VerticalLayout` that overflows clips at *both* ends, so the
// masthead and the last route disappear together and there is no
// indication either existed.
//
// `viewport-height` follows the content rather than being fixed: the
// screen's height changes by hundreds of pixels as it moves between
// signed-out, awaiting approval, and signed-in, and a constant would
// either strand a scrollbar on the short states or clip the tall one.
Flickable {
viewport-height: max(self.height, column.preferred-height);
column := VerticalLayout {
width: 100%;
alignment: start;
padding: Theme.gap-lg;
// Centres the column when it fits and lets it start at the top
// when it does not — the two cases the fixed `alignment: center`
// could not both serve.
padding-top: max(
Theme.gap-lg,
(root.height - card.preferred-height - 2 * Theme.gap-lg) / 2
);
Rectangle {
max-width: 460px;
horizontal-stretch: 0;
VerticalLayout {
card := VerticalLayout {
spacing: Theme.gap-lg;
// --- masthead ---
@@ -423,5 +445,6 @@ export component LaunchScreen inherits Rectangle {
}
}
}
}
}
}