style: refine sticky header on the artist and album detail pages

[United600]

No description provided.

[huynhsontung]

The artist's name is now deemphasized on the Album details page. Why are we changing the artist name style? We have more vertical space now right?

[huynhsontung]

Notice the header jitter while scrolling.

ApplicationFrameHost_C3HNSwG9d8.mp4

Also you can see the text flowing behind the header at the top edge. This is why I put the Header element on the same level as the ListView, and not as the ListView's Header. The ListView actually terminates before reaching the top edge .

[huynhsontung]

The new header also breaks keyboard navigation as it hides the focus highlight.

ApplicationFrameHost_C7OUc0Cg9m.mp4

[United600]

The artist's name is now deemphasized on the Album details page. Why are we changing the artist name style? We have more vertical space now right?

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

Notice the header jitter while scrolling.

Yeah sometimes it "bounces", I attempted to use Translation instead of Offset, but the issue still occurs. Do you think the overlap between the content and the header exacerbates this problem? Any tips?

Also you can see the text flowing behind the header at the top edge

Yep, I think it's because of said "bouncing", or maybe scaling related, but I always got that 1 pixel line visibility issue.

The new header also breaks keyboard navigation as it hides the focus highlight.

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

[huynhsontung]

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

You misread. I said artist name, which I just noticed you changed the font size to body text in the minimal state.

Yep, I think it's because of said "bouncing", or maybe scaling related, but I always got that 1 pixel line visibility issue.

Not really, even when we fix the top 1 pixel, you will still see the ListView behind the top 2 corners due to our corner radius > 1 pixel

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

This is not true. You can see in other parts of the app how ListView behaves when the mini-player is visible.

[United600]

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

You misread. I said artist name, which I just noticed you changed the font size to body text in the minimal state.

Yep, my bad.

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

This is not true. You can see in other parts of the app how ListView behaves when the mini-player is visible.

Right, it introduces a fixed padding. That would be ideal but it can't be "fixed" since it doesn't take into account the possibility of changes to text size.

[huynhsontung]

What's up with the fractional values? Are these values from WinUI?

[United600]

It is to keep the same height, and for the SplitButton also the content baseline, as the Button across all scales. However, it is not always perfect, as there can be discrepancies at either X25% or X75% scales.

No they are not from WinUI.