Dims.l incorrectly used to size square/circular components — use parent-relative guard instead

[moWerk]

Context

This issue is a focused follow-up to #44 which identified the deeper architectural problem with Dims — that it ignores the QML hierarchy and directly queries screen/display constants, breaking whenever windows are resized or run on non-fullscreen desktop platforms. That issue proposes the correct long-term solution of replacing Dims usage with parent/window-relative fractions throughout all asteroid apps.

This issue documents a specific symptom of that problem observed in qml-asteroid components themselves, and proposes a minimal targeted fix for the affected components while the broader Dims rework is tracked in the parent issue.

Specific problem

Dims.l(x) internally computes Math.min(Screen.desktopAvailableWidth, Screen.desktopAvailableHeight) * x / 100 — a fixed pixel value derived from screen-level constants evaluated at startup. When used to size a geometrically square or circular component, the component receives a pixel size that may be correct in isolation, but its parent item can still have non-square dimensions due to layout. The result is elliptical arcs and squished circles on irregular screens such as beluga.

Observed on device: RemorseTimer SegmentedArc renders as an ellipse on beluga.

Correct pattern for square/circular components

The parent-relative equivalent of Dims.l is simply:

width: Math.min(parent.width, parent.height) * 0.22
height: width

This is hierarchy-respecting — it reacts to actual parent layout dimensions rather than screen constants — and is exactly the kind of sizing that #44 advocates for. It is also more readable than the equivalent ternary it replaces.

For a root Item that must always be square:

height: Math.min(parent.width, parent.height)
width: height

Affected components

RemorseTimer.qml — SegmentedArc sized with Dims.l(22). Fix:

width: Math.min(parent.width, parent.height) * 0.22
height: width

SegmentedArc.qml — consumers set width and height independently with no internal guard. Consider adding a qdoc note warning that width and height must be equal for correct circular rendering, and that Dims.l is insufficient as a sizing method for this component.

Rule of thumb

• Dims.l — acceptable for fonts, margins, padding, stroke widths where screen-relative sizing is sufficient
• Math.min(parent.width, parent.height) — required for anything that must be geometrically square or circular, as it correctly respects the QML layout hierarchy

Relation to parent issue

The Math.min(parent.width, parent.height) pattern is the parent-scoped equivalent of what Dims.l attempts to do at screen scope. Adopting it for geometric components is a direct step toward the hierarchy-respecting sizing model proposed in #44.