How to use layoutPriority on 1 component while using maxWidth / minWidth on deprioritized component

Question

I am trying to create a UI component where we have a horizontal cell containing a title / subtitle on the leading side.

Then at the trailing end of the component, there's an optional text (actionText), like so:

This is what I want to accomplish:

1. Prioritizing the spacing of the title and subtitle - so if the either are long, we want to make the actionText use the minWidth and extend vertically (3 lines max). This part looks like it's working with the image above.
2. If the title and subtitle are short and we have a longer actionText, it can expand to the maxWidth. This part does not work.

This is what is happening:

1. The actionText is only taking up the minWidth even when the title / subtitle are short.
2. I tried to wrap the actionText in its own VStack and applied the frame parameters on the stack. But I saw the same result.
3. I tried using .fixedSize(horizontal: true, vertical: false) on the actionText but this doesn't allow the actionText to vertically expand.

The code I currently have:

public var body: some View {
    HStack(spacing: 8) {
        VStack {
            if let title, !title.isEmpty {
                Text(title)
            }
            if let subtitle, !subtitle.isEmpty {
                Text(subtitle)
            }
        }
        .layoutPriority(1)


    if let actionText, !actionText.isEmpty {
        Text(actionText)
            .textStyle(.body)
            .frame(minWidth: 45, maxWidth: 96, alignment: .trailing)
            .lineLimit(3)
    }
}

Does anyone have any idea what I am doing wrong here? I have tried so any random things to get this to work as expected!

Answer 1

Okay, so this was me being an idiot and not realizing .textStyle(.body) had it's own frame set for the text.