Button container is cut off when using Menu with .menuIndicator(.hidden)

Question

I'm adding some sort options to my macOS app that shows a list of stuff.

I'm using a Menu inside .toolbar {  ToolbarItemGroup() {} } like so:

Menu {
    ForEach(SortOption.allCases, id: \.self) { option in
        Toggle(isOn: Binding<Bool>(
            get: { userSettings.sortOption == option },
            set: { newValue in
                if newValue {
                    userSettings.sortOption = option
                }
            })) {
            Text(option.description)
        }
    }
}
label: {
    Image(systemName: "arrow.up.arrow.down")
}
.menuIndicator(.hidden)

Here's the result:

https://i.sstatic.net/R2utL.png

As you can see, the hover state / container of the label image seems to be cut off. I suspect that it's caused by .menuIndicator(.hidden) which I'm using to remove the default chevron that shows up next to the icon (it looks ugly and is too close to the icon: see image).

Is it possible to remove the menu indicator while leaving the hover state container intact?

Answer 1

I can replicate the truncation of the button when .menuIndicator(.hidden) is applied. Adding the .fixedSize() modifier seems to fix it:

Menu {
 // etc
} label: {
  Image(systemName: "arrow.up.arrow.down")
}
.menuIndicator(.hidden)
.fixedSize()

Without the modifier:

With the modifier: