Summary

Improve the iPhone Control tab destination row styling so the rows feel cleaner, better balanced, and closer to native iOS list rows without changing the iPad sidebar or the Gateway status row.

Problem to solve

The iPhone Control tab destination rows currently feel too tall and visually empty. The current row implementation combines a custom row layout, explicit semibold subheadline text styling, and explicit vertical padding. In the grouped Control list, this makes the rows feel heavier than necessary and leaves more empty vertical space than the content requires.

This issue is specifically about the phone Control tab destination rows. The Gateway row is a distinct status row and should not be changed as part of this issue. The iPad sidebar/control presentation should also remain unchanged.

Proposed solution

Update only the iPhone Control tab destination rows in RootTabsPhoneControlHub.rowLabel(_:) to use SwiftUI's native Label structure while keeping the existing ProIconBadge treatment for the leading icon:

private func rowLabel(_ destination: RootTabs.SidebarDestination) -> some View {
    Label {
        Text(destination.title)
    } icon: {
        ProIconBadge(systemName: destination.systemImage, color: .secondary)
    }
}

This keeps the app's established row icon badge styling, but removes the custom row wrapper, explicit title font override, and extra vertical padding that were making the Control rows feel oversized.

Keep the surrounding row behavior unchanged:

• row ordering and destination filtering
• navigation behavior
• chevrons
• section/group styling
• tab bar icons
• Gateway status row styling
• iPad sidebar/control UI

Alternatives considered

• Use a plain SF Symbol inside Label. This made the rows denser, but looked too plain compared with the app's existing Settings row style.
• Keep the current custom row layout and only reduce vertical padding. This helps row height somewhat, but keeps the heavier custom composition.
• Add Settings-app-style rounded square icon tiles with gradients. The PoC made the rows look more visually busy, and without fixed dimensions the SF Symbol backgrounds varied by glyph shape.
• Standardize phone Control rows with iPad sidebar rows. This is not desired; the iPad sidebar is a separate UI surface and should not be affected.
• Change the Gateway row at the same time. This is not desired; the Gateway row has status and subtitle content and should remain separate from this row-density cleanup.

Impact

Affected: iPhone users viewing the Control tab destination list.

Severity: Low to medium UX polish issue.

Frequency: Always visible when users open the phone Control tab.

Consequence: The Control destination list currently feels less balanced and less native than it should, making the screen look emptier than the content requires.

Evidence/examples

A local simulator PoC compared several row treatments. The preferred version keeps the row as a native SwiftUI Label while using ProIconBadge as the icon content:

Label {
    Text(destination.title)
} icon: {
    ProIconBadge(systemName: destination.systemImage, color: .secondary)
}

The PoC was checked on the iPhone simulator. The intended change is phone-only because RootTabsPhoneControlHub.swift owns the phone Control hub rows, while the iPad sidebar uses a separate UI path and should remain unchanged.

Screenshots from the PoC should be attached to the follow-up PR as before/after evidence.

Additional information

Suggested implementation surface:

• apps/ios/Sources/Design/RootTabsPhoneControlHub.swift

Non-goals:

• no iPad sidebar changes
• no Gateway row changes
• no tab icon changes
• no toolbar/icon-only control changes
• no navigation or destination behavior changes