Vertical orientation and landscape orientation are different in the Xcode simulator

When I run my code and start the simulator, vertical orientation looks good, but when I turn to landscape orientation, the name in the display cuts.

import SwiftUI
struct ContentView: View {
    @Environment(\.horizontalSizeClass) var hSizeClass
    @Environment(\.verticalSizeClass) var vSizeClass
    var body: some View {
        if hSizeClass == .compact && vSizeClass == .regular {
            compactDesign()
        }else {
            regularDesign()
        }
    } }
struct compactDesign: View {
    var body: some View{
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack(){
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                    .clipShape(Circle())
                Text("María Ramirez")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                    .bold()
                Text("Calle #123")
                    .foregroundColor(.white).font(.title).italic()
            }
        }
    } }
struct regularDesign: View {
    var body: some View{
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            HStack(){
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                VStack(alignment: .leading, spacing: 10){
                    Text("María Ramirez")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .bold()
                        .clipShape(Circle())
                    Text("Calle #123")
                        .foregroundColor(.white).font(.title).italic()
                }
            }
        }
    } }
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    } }

Solution 1:

You need to be careful with your modifiers. You put the .clipShape() on to your Text(), not the Image. Also, be consistent with your code. If you chain modifiers on one line, do the same thing on the other lines. If you have them on separate lines, keep them on separate lines. It makes your code easier to follow. Lastly, when posting code like this with an image we don't have, substitute a Rectangle() for it to make it easier to run for ourselves.

struct regularDesign: View {
    var body: some View{
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            HStack {
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                    .clipShape(Circle()) // <- To here
                VStack(alignment: .leading, spacing: 10){
                    Text("María Ramirez")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .bold()
                        //.clipShape(Circle()) <- Move This
                    Text("Calle #123")
                        .foregroundColor(.white)
                        .font(.title)
                        .italic()
                }
            }
        }
    }
}