Skip to content

Improve the padding on the right side of the Traffic History header (where the period tabs are) #8

@qaid

Description

@qaid

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

  • The right edge of the period picker (1 Hour / 24 Hours / 7 Days) is visually aligned with the right edge of other content sections in the panel (within ~2pt).
  • The "Traffic History" label on the left retains correct left-edge alignment with other section labels.
  • No other layout, functionality, or behaviour is changed.
  • The fix applies only to TrafficGraphView.swift.

Relevant File

  • Sources/Spook/Views/TrafficGraphView.swift, TrafficGraphView.body, lines ~25–42 (the HStack containing "Traffic History" label and Picker).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions