Bubble's Reverse Scroll Repeating Group: What Actually Works
Building a chat interface in Bubble has always had one awkward requirement: messages should anchor to the bottom and scroll upward, the way every chat app from WhatsApp to Slack works. Until recently, achieving this meant using third-party CSS inversion plugins, which were messy, often broke on nested repeating groups, and caused cascading layout problems. Bubble's native reverse scroll direction feature aims to replace that entirely. The question is whether it actually does.
How the Feature Works
The toggle is simple to find. On any repeating group set to vertically scrolling, with no fixed number of rows, you will see a Reverse scroll direction checkbox. Enable it and the group loads from the bottom up, exactly as you would expect from a chat UI.
The issue lies in a third requirement that is easy to miss: the repeating container must be set to fixed height. This is where most builders hit a wall.
The Fixed Height Limitation
When Bubble requires a fixed height for reverse scrolling to become available, it rules out the most natural way to build a responsive chat layout. In a typical web app, you want the chat container to fill the available screen height, expanding and contracting based on the viewport rather than being locked to a specific pixel value.
A fixed pixel height means messages are cut off on larger screens and overflow on smaller ones. Responsive design in Bubble is built around rows and columns that adapt to content, and a fixed-height container is fundamentally at odds with that.
The workaround of setting fixed height to 100% is the key insight many builders miss initially. This preserves the reverse scroll behaviour while allowing the container to fill its parent, making the layout responsive in practice. The details of how to set up this full-height approach properly, including how to configure the parent containers and handle mobile viewports, are covered fully in the complete reverse scroll setup tutorial.
Nested Repeating Groups Make It Harder
If your chat interface displays AI-generated responses that include recommended items, you will likely have a child repeating group nested inside the parent chat repeating group. Applying reverse scroll to the outer group while maintaining correct rendering of the inner group introduces significant CSS complexity when using third-party plugins. The native feature handles this better, but it still requires careful testing to confirm that nested groups render correctly across different content lengths and screen sizes.
Where This Leaves Chat Interface Development in Bubble
The native reverse scroll feature is a genuine step forward. It removes the dependency on CSS inversion plugins that were fragile and hard to debug. The 100% fixed height approach makes it usable in responsive layouts, not just fixed-dimension prototypes.
That said, Bubble is still not as straightforward as purpose-built chat platforms for this specific pattern. Builders who need a reliable, polished chat UI should test the feature thoroughly on their actual content before committing it to a production app. For anyone building AI assistant interfaces or messaging features in Bubble, the improvement is meaningful enough to warrant replacing any existing plugin-based solution.