NSPopover not aligned to NSStatusItem menubar icon

Question

I'm trying to make a menubar app for macOS 12 that shows a popover when the menubar icon is clicked. As you can see from the attached screenshot, I have the popover showing but it's not actually aligned to the menubar icon. Here's the relevant code:

class AppDelegate: NSObject, NSApplicationDelegate {
    var popover: NSPopover!
    var statusBarItem: NSStatusItem!

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Create the SwiftUI view that provides the window contents.
        let contentView = ContentView()

        // Create the status item
        statusBarItem = NSStatusBar.system.statusItem(withLength: CGFloat(NSStatusItem.variableLength))

        // Create the popover
        let popover = NSPopover()
        popover.behavior = .transient
        popover.contentViewController = NSHostingController(rootView: contentView)
        self.popover = popover

        if let button = statusBarItem.button {
            button.image = NSImage(systemSymbolName: "eyes", accessibilityDescription: "Eyes")
            button.action = #selector(togglePopover(_:))
        }
    }

    @objc func togglePopover(_ sender: AnyObject?) {
        guard let button = statusBarItem.button else { return }

        if popover.isShown {
            popover.performClose(sender)
        } else {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: .maxY)
        }
    }
}

Answer 1

You can assign contentSize to the popover which is the same size with contentView:

popover.contentViewController = NSHostingController(rootView: contentView)
popover.contentSize = NSSize(width: popoverWidth, height: popoverHeight)

ContentView:

struct ContentView: View {
  var body: some View {    
    VStack {
      Text("Hello World")
    }
    .frame(width: viewWidth, height: viewHeight)
  }
}