I would like my `LoadingTitle` to have a width of 70% of the screen so I use the `GeometryReader` but it makes the vertical size expand and my `LoadingTitle` takes much more vertical space. I would like it to remain as compact as possible.

When using hardcoded `width: 300` I get the correct layout (except the relative width):

```
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            LoadingTitle()
            Color.blue
        }
    }
}

struct LoadingTitle: View {
    var body: some View {
        HStack() {
                Color.gray
            }
            .frame(width: 300, height: 22)
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
    }
}

```

[![enter image description here](https://i.stack.imgur.com/3Ijop.png)](https://i.stack.imgur.com/3Ijop.png)

Now if I wrap the `body` of my `LoadingTitle` in the `GeometryReader` I can get the correct relative size but then the `GeometryReader` expands my view vertically:

```
struct LoadingTitle: View {

    var body: some View {
        GeometryReader { geo in
            HStack() {
                Color.gray
                    .frame(width: geo.size.width * 0.7, height: 22, alignment: .leading)
                Spacer()
            }
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
        }
    }
}

```

[![enter image description here](https://i.stack.imgur.com/749mE.png)](https://i.stack.imgur.com/749mE.png)

I tried using `.fixedSize(horizontal: false, vertical: true)` on the `GeometryReader` as [other suggested](https://stackoverflow.com/questions/56524226/use-swiftui-geometryreader-without-affecting-outer-frame) but then the resulting view is too much compact and all its paddings are ignored:

[![enter image description here](https://i.stack.imgur.com/Cu6ER.png)](https://i.stack.imgur.com/Cu6ER.png)

How could I achieve the layout of the 1st screenshot with a relative width?