How Tailscale Solved the MacBook Pro Notch Icon Issue with a New Windowed UI
Tailscale released a macOS windowed version that eliminates the notch‑induced menu‑bar icon hiding problem by introducing dual‑mode interfaces, a hybrid AppKit‑SwiftUI architecture, performance and security upgrades, and developer‑friendly features, turning a UI limitation into a richer user experience.
Background
Since the 2021 MacBook Pro models introduced a notch, the system menu‑bar area can hide the Tailscale status‑icon when many icons are present. The icon becomes invisible and unclickable, leading users to think the application failed to start.
Interim Workarounds
Use the performClick API via a shortcut command to force the menu to appear even when the icon is occluded.
Detect possible occlusion with occlusionState and show a smart notification that guides the user to invoke the shortcut.
These patches mitigated the problem but did not provide a long‑term user experience.
Ultimate Solution – macOS Windowed Client (v1.96.2)
On 27 March 2026 Tailscale released a native windowed client for macOS. The client offers two interchangeable modes:
Mini player : a lightweight floating window that stays at the screen edge, shows connection status and allows one‑click node switching.
Full window : a dedicated application window that displays the device list, subnet routes, DNS configuration and other advanced controls.
This design eliminates the notch‑related icon hiding and provides a scalable UI for future features.
Technical Evolution
Mac Catalyst stage : a cross‑platform prototype that delivered basic functionality quickly.
AppKit native rewrite : switched to native macOS development for better compatibility and performance.
AppKit + SwiftUI hybrid : the current windowed version retains native capabilities while using SwiftUI for faster UI development and a modern look.
Notch Detection Code
self.visibilityObserver = NotificationCenter.default.addObserver(
forName: NSWindow.didChangeOcclusionStateNotification,
object: statusItemButton.window,
queue: .main) { [weak self] _ in
guard let self = self, statusItem.isVisible else { return }
isIconOccluded = !(statusItem.button?.window?.occlusionState.contains(.visible) ?? false)
}Feature Highlights
Device management : searchable list, real‑time connection status, one‑click copy of MagicDNS/IP, built‑in ping tool.
Exit node control : searchable list, latency‑based recommendations, remembers last node.
Taildrop file transfer : visual UI with real‑time progress and quick target selection.
Debug & error handling : dock‑icon red‑dot alerts, side‑panel error details, dedicated debug window for bug reports.
Account management : double‑click to switch, multi‑account support.
Recent Updates (v1.96.4)
Performance : fixed a memory‑leak caused by high network‑map response rate; upgraded Go from 1.25 to 1.26; optimized Peer Relay throughput by reducing lock contention.
Security : patched command‑injection vulnerability (TS‑2026‑001) in tssentinelId; removed DNS health warnings when Tailscale DNS is disabled.
New policies : HideDockIcon lets users hide the Dock icon; AuthBrowser.macos sets the preferred browser; added Release Candidate auto‑updates from the About page.
Developer Takeaways
Proactively detect menu‑bar icon visibility with occlusionState and guide users via notifications.
Provide a dual‑mode UI to keep legacy menu‑bar presence while offering a full‑featured window.
Expose user‑controllable policies (e.g., HideDockIcon) so users can tailor their experience.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
