[1607] Too much whitespace on gauge on mobile + desktop

[n-lark]

Description

On tall cells (common on mobile), dial gauges drifted down, leaving a gap between the title and the arc. The SVG filled the whole cell while the arc stayed capped by width.

The fix, in UIGaugeDial.vue's resize(): the gauge is a vertical stack (title on top, SVG below). When the cell is taller than the arc needs, we stop the SVG from stretching to fill and size it to just the arc plus room for the 0/100 labels. The stack then sits at the top so the arc sits right under the title, and any spare height falls below instead of opening a gap above. Short/wide/square cells skip this and keep the old behavior. Covers both half and three-quarter dials.

See before + after pics

Half Gauge

Before

After

3/4ths Gauge

Before

After

Related Issue(s)

Resolves #1607
Relates to https://github.com/FlowFuse/engineering/issues/242

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label