Best Value rows: capsule on its own line, comparison caption beneath

The verdict capsule shared a line with "vs closest eligible station"; the
caption's layoutPriority squeezed the capsule until it truncated
("Approx. £2.75 better off after tra…"), and in this sort mode the verdict
is the point of the row.

- The capsule now owns the line and the caption sits under it.
- The capsule text also shrinks rather than truncating at large Dynamic
  Type sizes, since nothing competes with it for width.
- The detail sheet keeps its side-by-side layout: it has the room, and the
  verdict there is the sheet's headline.
This commit is contained in:
FuelBoard Contributor
2026-10-15 22:25:53 +01:00
parent 5f3051aed7
commit ed3a5137cd
+17 -10
View File
@@ -107,16 +107,19 @@ struct FuelSavingsSummaryView: View {
// break even, blue baseline. lineLimit + minimumScaleFactor keep // break even, blue baseline. lineLimit + minimumScaleFactor keep
// it to one line, so rows stay even. // it to one line, so rows stay even.
VStack(alignment: .leading, spacing: 2) { VStack(alignment: .leading, spacing: 2) {
HStack(alignment: .firstTextBaseline, spacing: 6) { // The capsule gets the WHOLE line and the comparison caption
capsule(for: result, compact: true) // sits beneath it. Side by side, the caption's layoutPriority
.accessibilityLabel(accessibilityHeadline(for: result)) // squeezed the verdict until it truncated ("Approx. £2.75
Text(comparisonLabel(for: result)) // better off after tra…"), and in this sort mode the verdict
.font(.caption2) // is the point of the row.
.foregroundStyle(.secondary) capsule(for: result, compact: true)
.lineLimit(1) .accessibilityLabel(accessibilityHeadline(for: result))
.layoutPriority(1) Text(comparisonLabel(for: result))
.accessibilityLabel("Comparison: \(comparisonLabel(for: result))") .font(.caption2)
} .foregroundStyle(.secondary)
.lineLimit(1)
.minimumScaleFactor(0.85)
.accessibilityLabel("Comparison: \(comparisonLabel(for: result))")
if let warning = priceWarning ?? priceConfidence.warningText { if let warning = priceWarning ?? priceConfidence.warningText {
Text(warning) Text(warning)
.font(.caption2) .font(.caption2)
@@ -281,6 +284,10 @@ struct FuelSavingsSummaryView: View {
.accessibilityHidden(true) .accessibilityHidden(true)
Text(result.capsuleHeadline()) Text(result.capsuleHeadline())
.lineLimit(1) .lineLimit(1)
// Belt and braces: now that the capsule owns its line it has no
// rival for width, and shrinking beats truncating at large
// Dynamic Type sizes.
.minimumScaleFactor(0.8)
} }
.font(compact ? .caption.weight(.semibold) : .headline) .font(compact ? .caption.weight(.semibold) : .headline)
.foregroundStyle(capsuleColor(for: result.status)) .foregroundStyle(capsuleColor(for: result.status))