# coverActionArea missing top padding on small cover

I'm trying to design a nice cover page for an app I'm working on (Hutspot). I have a component anchored to the top of coverActionArea. I added a red rectangle component to demonstrate the issue.

As you can see, on the left (small cover) it's missing top padding. To make matters worse, size property on Cover component is always returning the same value (maybe I just don't understand how it works?) so I have no clue how to detect this in my code. This means, I can either have an ugly, unnecessary padding added or missing padding with more than 4 apps open.

I debugged the issue, apparently cover itself is scaled down (makes sense) but it's done in such a way, the app itself is not made aware of that in any way. Buttons keep original size (makes sense), but after scaling everything else down, proportions are completely different. This is probably the easiest way to reproduce this issue:

CoverBackground {
Rectangle {
anchors.fill: coverActionArea
z: 3
color: "blue"
}

CoverActionList {
CoverAction { iconSource: "image://theme/icon-cover-previous-song" }
CoverAction { iconSource: "image://theme/icon-cover-pause" }
}
}


Notice what's happening after tapping on one of the cover actions. Background behind the button does not align with the blue box.

edit retag close delete

@pisarz1958