CommentViewRow comment text weird spacing behavior...?-CodePudding

I am trying to make an adaptive CommentViewRow for a social-app where the whole comment text can be displayed within the row.

So far I am achieving this but I have 3 issues:

1 When the comment-text is short it is being centered within the row even when I specify ".alignment: .leading" in the VStack.

2 When when the comment-text uses more than one line there is a mysterious padding between the user's profile picture & the comment-text?? see image below.

3 I am not sure if my .frame modifier is the best way to achieve what I am doing, it seems mickey-mouse, I was reading about .frame(idealWith, idealHeight, etc..) and not sure if that would help.

Any idea on how I can fix this so that each CommentViewRow displays like your average social-media comment view??

Thank you!

struct CommentViewRow: View {    
    var comment: Comment
    
    var body: some View {
        HStack { 
            KFImage("profilePicture")
           
            // COMMENT
            VStack(alignment: .leading, spacing: 5) {
                Text("**\(comment.username)** \(comment.comment)")
                    .font(.caption)
                    .frame(width: 310) 
                    .fixedSize(horizontal: true, vertical: false)
                
                Text(comment.createdAt.timeAgoDisplay())
                    .bold()
                    .font(.caption)     
            }
            Spacer()
        }.padding([.leading, .trailing], 10)      
    }
}

CodePudding user response：

Change .frame(width: 310) to .frame(width: 310, alignment: .leading)

CodePudding user response：

yes, get rid of the frame:

struct ContentView: View {
    
    var comment = "Thjfhg jhfgjhdfg jdfhgj  dfhdfsjjdfgh djdshfg hjdfgjfdh ghjkf gdhjdfgh jkh fjg dfjkhgj dfglkhdfsg"
    
    var body: some View {
        HStack {
            Image(systemName: "person.circle")
                .font(.largeTitle)
            
            VStack(alignment: .leading, spacing: 5) {
                Text("\(comment)")
                    .font(.caption)
                
                Text("3 minutes ago")
                    .bold()
                    .font(.caption)
            }
            Spacer()
        }.padding([.leading, .trailing], 10)
    }
}