Bottom aligned chat interface with CSS

While designing a chat interface for an AI product recently, I was using React-Native and so quickly reached for LegendList to have a performant list that could easily be bottom aligned for expected UX. I found however, that LegendList gave me some weird vibrating UI elements.

LegendList was in beta, so I’m sure it’s probably fine and I’m using it wrong, however, performance wasn’t really something I needed to solve, so I ditched it in favour of just doing it in basic CSS.

The solution

I’ll provide my approach in standard CSS, even though what I used was tailored for ReactNative.

The core of the solution is really just that the chat container applies a “column-reverse” value. This causes it’s contained elements to align to the opposite end of the column. ie. The bottom.

Everything else in this CSS is just to help it fill the screen or look slightly nicer.

.overallContainer {
    display: flex;
    height: 100%;
}
.chatContainer {
    flex: 1,
    display: flex;
    flex-direction: "column-reverse";
    gap: 10px;
}
.chatBubble {
    ...
}

When you apply the column-reverse value, though, it will display the messages in the opposite order to normally. So while chat windows usually display the newest message last, your array holding the messages should have the newest messages first.

const chatHistory = [
    message1,
    message2,
    message3,
    message4,
]