Skip to content

Remove the gray frame around the menu bar menu on macOS 27 #846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
senadaruc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove the gray frame around the menu bar menu on macOS 27 #846

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions Cotabby/UI/MenuBar/MenuBarView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,15 +506,27 @@ private struct MenuBarWindowBackgroundModifier: ViewModifier {
// outside the content; keeping both surfaces visible is what creates the double
// outline. By owning the one visible rounded surface here, the menu has a single border
// regardless of how much padding the system host reserves around it.
//
// No SwiftUI `.shadow` here: the host window is only a few points larger than this
// panel, so a soft shadow gets clipped at the window edge and reads as a hard gray
// frame around the menu. The native window shadow (enabled in the configurator) is
// drawn by the window server outside the window and follows the panel's alpha shape.
//
// `.ignoresSafeArea()` matters on macOS 27: the host window is 8pt taller than this
// view (a 4pt safe-area inset top and bottom), and the system paints its own rounded
// backing across the whole window. A panel that stops at the safe area leaves that
// backing showing as a gray frame above and below the menu; filling to the window
// edges covers it so there is one surface.
content
.background {
RoundedRectangle(cornerRadius: Self.macOS26PopoverCornerRadius, style: .continuous)
.fill(Color(nsColor: .windowBackgroundColor))
.shadow(color: .black.opacity(0.28), radius: 18, x: 0, y: 8)
.ignoresSafeArea()
}
.overlay {
RoundedRectangle(cornerRadius: Self.macOS26PopoverCornerRadius, style: .continuous)
.stroke(Color(nsColor: .separatorColor).opacity(0.7), lineWidth: 1)
.ignoresSafeArea()

@greptile-apps greptile-apps Bot Oct 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 MacOS 26 outline unverified The expanded fill and outline apply on macOS 26 as well as 27. That branch was designed to avoid a double outline, but the stated test plan has not checked macOS 26 and there is no menu-window rendering test for it. Please check the panel on macOS 26 so an outline regression is not missed.

Knowledge Base Used: Onboarding and menu bar

Fix in Codex Fix in Claude Code

}
} else if #available(macOS 15.0, *) {
// MenuBarExtra's `.window` style already gives us native rounded window chrome. Place
Expand All @@ -541,7 +553,10 @@ private enum MenuBarWindowChromeConfigurator {
static func configure(_ window: NSWindow) {
window.isOpaque = false
window.backgroundColor = .clear
window.hasShadow = false
// The window itself is clear, so the window server derives the shadow from the alpha of
// the SwiftUI panel: it hugs the rounded rectangle and, unlike a SwiftUI shadow, is not
// clipped by the window's bounds.
window.hasShadow = true

for backingView in [window.contentView, window.contentView?.superview].compactMap({ $0 }) {
backingView.wantsLayer = true
Expand Down