maxWidth infinity failure SwiftUI

Question

I have the following code:

Button(action: {
                }, label: {
                    Text("Save".uppercased())
                        .foregroundColor(.white)
                        .font(.headline)
                        .background(Color.accentColor)
                        .frame(height: 55)
                        .frame(maxWidth: .infinity)
                        .cornerRadius(10)
                })
            }
            .padding(14)

I've checked it over and am clearly missing something because the max width is not working whatsoever. The button is still tightly confined around the "SAVE" text. I have also tried manually adjusting the width but this hasn't changed anything.

Any suggestions? I am running XCode 13.

Answer 1

Order matters a lot in view modifiers ;)
I suppose you want this:

            Text("Save".uppercased())
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .background(Color.accentColor)
                .cornerRadius(10)
            
                .foregroundColor(.white)
                .font(.headline)

The Text itself is only as tall & wide as it needs to be, so first the frames to define the size, then the background color for that area, then the corner radius.
Foreground color and font can go anywhere.

You can see and check many of the (also if working) effects in the preview, where you can select single lines of code and see the resulting frame.