Ionic grid, colum sizing

Hello

I am building a chat functionality in my app. Everything works fine, i just need some help with the styling. I am using a grid for the chat, each message being a row. Depending on if you are the sender or receiver of the message, it has to have a different layout.
This is done with a ternary operator

eg: ${message.userid == userId ? styles.sender : styles.receiver}

As you can see in my screenshot, all rows/collumns are the same length. I want it to change length depending on the message.
Is there any way the column size can be adjusted dynamically using this grid format?

A second, less important, question. The

tag for message.text has 2 classes ‘text’ and ‘sender’ or ‘receiver’. The stuff i place in ‘text’ never works (shared stuff between sender and receiver was placed in text but i never got it work using regular css class selectors)

Message Component:

interface MessageProps {
    message: MessageModel;
}

const Message: React.FC<MessageProps> = ({ message}) => {
    const { userId } = useAuth();

    return (
        <IonRow class={"ion-no-margin ion-no-padding"} >
            <IonCol offset={`${message.userid == userId ? 3 : 0}`} size="9" className="ion-no-margin ion-no-padding">
                {message.userid != userId ?  <p className={styles.username} >{message.username}</p> : <div />}
                <p className={`text ${message.userid == userId ? styles.sender : styles.receiver}`}>{message.text}</p>
            </IonCol>
        </IonRow>
    );
};

export default Message;

styles for message component:

.username {
    font-size: 80%;
}


p.sender {
    background-color: var(--ion-color-tertiary);
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

p.receiver {
    background-color: var(--ion-color-secondary);
    text-align: left;
    color: #fff;
    white-space: pre-wrap;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0px;
}

Message component being used in chat view:

                <IonGrid>
                    {messages.length == 0 ?
                        <h2 className="ion-margin ">Er zijn nog geen berichten verstuurd over dit recept.</h2>
                        :
                        messages.map((message, index) =>
                            <Message message={message} key={index} />
                    )}
                </IonGrid>

How it looks:

1 post - 1 participant

Read full topic