fix(slint): jump-nav natural-top at body-row top, no header overlap

The previous binding pulled the bar 44px up from body-row's top
(`body-row.y - self.height`), which landed it inside the artist
header — eating the action buttons row. The right value is
`body-row.y` itself: the bar takes the top 44px of the 52px
reservation slot that lives as body-row's first child, so it sits
exactly in the gap between the header above and the body below
(Popular Tracks header starts 52px into the body row, giving an
8px breathing gap below the bar). No overlap on either side.

Sidebar natural-top compensates with `+ jump-nav.height` so it
still starts flush with the bar's bottom edge as before.

cc
This commit is contained in:
vicrodh committed 2026-05-20 17:09:50 -06:00
1 parent 06a763443a
commit 69029238ee
1 file changed
+13 -12
+13 -12
View File
@@ -684,14 +684,15 @@ export component ArtistPageView inherits Rectangle {
// y is the row just below the artist header in the page layout // y is the row just below the artist header in the page layout
// (NavButtons + spacer + artist header + small gap, ~290px). // (NavButtons + spacer + artist header + small gap, ~290px).
jump-nav := JumpNavBar { jump-nav := JumpNavBar {
// Dynamic anchor — sits 44px above the body row, regardless // Sits AT the body row's top, taking the 44 top pixels of
// of how tall the artist header grew. As the user scrolls // the 52px reservation slot the body row's first child
// past the header, the bar pins to viewport top // carves out — so the bar never overlaps the artist header
// (sticky-top = 0). // above (header ends exactly at body-row.y) and never
// overlaps Popular Tracks below (Popular Tracks header
// starts 52px into the body row, an 8px gap below the bar).
property <length> natural-top: property <length> natural-top:
body-row.absolute-position.y body-row.absolute-position.y
- page-flickable.absolute-position.y - page-flickable.absolute-position.y;
- self.height;
property <length> sticky-top: 0px; property <length> sticky-top: 0px;
x: 0; x: 0;
@@ -727,13 +728,13 @@ export component ArtistPageView inherits Rectangle {
// bottom edge is always flush with the now-playing bar // bottom edge is always flush with the now-playing bar
// (height = root.height - y), so no gap appears when sticky. // (height = root.height - y), so no gap appears when sticky.
if NetworkSidebarState.open: sidebar-panel := Rectangle { if NetworkSidebarState.open: sidebar-panel := Rectangle {
// Anchored to the body row's actual top, so the sidebar // Anchored 44px below the body row's top (= bottom edge
// always starts flush with the bottom of the JUMP TO bar // of the JUMP TO bar, which itself starts AT body row
// (which itself sits 44px above the body row). Matches // top). The +44 ensures the sidebar always begins
// long-bio artist pages where the header pushes // flush with the bar's bottom edge, no overlap.
// everything further down.
property <length> natural-top: property <length> natural-top:
body-row.absolute-position.y - page-flickable.absolute-position.y; body-row.absolute-position.y - page-flickable.absolute-position.y
+ jump-nav.height;
// 44px parks the sidebar just below the sticky JUMP TO // 44px parks the sidebar just below the sticky JUMP TO
// bar (jump-nav's height) once the header scrolls away. // bar (jump-nav's height) once the header scrolls away.
property <length> sticky-top: 44px; property <length> sticky-top: 44px;