Problem
In TrafficGraphView (Sources/Spook/Views/TrafficGraphView.swift, lines ~25–42), the range selector Picker (segmented style, .frame(width: 180)) sits in an HStack that uses .padding(.horizontal, 12). The right visual edge of the picker appears misaligned relative to the right edge of other content in the panel.
Root cause: macOS segmented controls (NSSegmentedControl, the underlying AppKit view for SwiftUI's segmented Picker) have their own internal horizontal insets. When SwiftUI adds .padding(.horizontal, 12) on top, the right edge of the picker ends up with more visual gap than the "Traffic History" label has on the left, or the picker appears to not align with the right edges of controls in other sections (e.g., the direction filter buttons and freeze button in AppListHeaderView, which also use .padding(.horizontal, 12)).
What to Fix
Adjust the padding so the right visual edge of the segmented picker aligns with the right edge of content in the SummaryHeaderView, SearchFieldView, and AppListHeaderView sections.
Try the following approaches in order (stop at whichever achieves correct visual alignment):
Option A — Compensate for the segmented control's internal inset with a negative trailing offset:
Picker(...)
.pickerStyle(.segmented)
.frame(width: 180)
.padding(.trailing, -4) // adjust value visually
Option B — Use asymmetric padding on the containing HStack:
// Change .padding(.horizontal, 12) to:
.padding(.leading, 12)
.padding(.trailing, 8)
Option C — Reduce the picker frame width slightly so it sits flush within the existing padding:
.frame(width: 172) // adjust value visually
The correct value may require building and visually inspecting the panel at 1x scale.
Acceptance Criteria
Relevant File
Sources/Spook/Views/TrafficGraphView.swift, TrafficGraphView.body, lines ~25–42 (the HStack containing "Traffic History" label and Picker).
Problem
In
TrafficGraphView(Sources/Spook/Views/TrafficGraphView.swift, lines ~25–42), the range selectorPicker(segmented style,.frame(width: 180)) sits in anHStackthat uses.padding(.horizontal, 12). The right visual edge of the picker appears misaligned relative to the right edge of other content in the panel.Root cause: macOS segmented controls (
NSSegmentedControl, the underlying AppKit view for SwiftUI's segmentedPicker) have their own internal horizontal insets. When SwiftUI adds.padding(.horizontal, 12)on top, the right edge of the picker ends up with more visual gap than the "Traffic History" label has on the left, or the picker appears to not align with the right edges of controls in other sections (e.g., the direction filter buttons and freeze button inAppListHeaderView, which also use.padding(.horizontal, 12)).What to Fix
Adjust the padding so the right visual edge of the segmented picker aligns with the right edge of content in the
SummaryHeaderView,SearchFieldView, andAppListHeaderViewsections.Try the following approaches in order (stop at whichever achieves correct visual alignment):
Option A — Compensate for the segmented control's internal inset with a negative trailing offset:
Option B — Use asymmetric padding on the containing
HStack:Option C — Reduce the picker frame width slightly so it sits flush within the existing padding:
The correct value may require building and visually inspecting the panel at 1x scale.
Acceptance Criteria
TrafficGraphView.swift.Relevant File
Sources/Spook/Views/TrafficGraphView.swift,TrafficGraphView.body, lines ~25–42 (theHStackcontaining"Traffic History"label andPicker).