[Mobile Regression] HTML Component tables are now forcibly stacking (display: block) instead of horizontally scrolling

💬 Mobile
1

The Issue:
As of today (Dec 23, 2024), there seems to be a regression in how the Retool Mobile HTML Component renders standard

tags.

Previously, an HTML table wrapped in a div with overflow-x: auto would render correctly: columns would sit side-by-side, and the user could scroll horizontally if the table was too wide.

Current Behavior:
The renderer now appears to be aggressively forcing display: block (or similar native behavior) on

and
elements. This forces every single table cell to stack vertically into a "card" layout, making tabular data impossible to read.

Timeline:
This was working correctly earlier today. Without any code changes on our end, the rendering changed on a page reload, suggesting a platform-side update to the mobile renderer or the underlying react-native-render-html library configuration.

Steps to Reproduce:

  1. Create a Retool Mobile app.

  2. Drag in an HTML Component.

  3. Paste the following "Minimum Reproducible Example" (Static HTML) into the value field:

codeHtml

<div style="padding: 10px; font-family: sans-serif;">
  <h3>Static Table Test</h3>
  <!-- The Scroll Wrapper -->
  <div style="overflow-x: auto; border: 1px solid #ccc; border-radius: 4px;">
    <!-- Standard HTML Table -->
    <table style="width: 100%; border-collapse: collapse; min-width: 500px; background-color: #ffffff;">
      <thead>
        <tr style="background-color: #f0f0f0; border-bottom: 2px solid #ccc;">
          <th style="padding: 10px; text-align: left;">ID</th>
          <th style="padding: 10px; text-align: left;">Status</th>
          <th style="padding: 10px; text-align: left;">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid #eee;">
          <td style="padding: 10px;">101</td>
          <td style="padding: 10px;">Active</td>
          <td style="padding: 10px;">This row should stay horizontal but it is stacking.</td>
        </tr>
        <tr style="border-bottom: 1px solid #eee;">
          <td style="padding: 10px;">102</td>
          <td style="padding: 10px;">Pending</td>
          <td style="padding: 10px;">Another row to check alignment.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Attempted Fixes (None worked):

  • Adding display: table !important or display: flex to rows/cells (Styles appear to be stripped or ignored).

  • Using strict pixel widths (e.g., width: 600px).

  • Converting

    tags to
    tags with Flexbox (even divs are stacking, suggesting a very aggressive layout override).

    Request:
    Can the team confirm if an update was pushed to the Mobile renderer? We need a way to opt-out of this "Card View" enforcement or a workaround to restore horizontal scrolling for data grids.

    Screenshot 2025-12-23 at 6.14.39 PM
    Screenshot 2025-12-23 at 6.14.39 PM954×1438 62.2 KB

4

Hi @neilbalthaser,

Let me ping the mobile team and see if there were any changes made that could have caused this regression.

I just tested out the code snippet and it looks as shown below, it was not initially having horizontal scrolling but after clicking the check box in the component inspector I can scroll horizontally.

CleanShot 2026-01-26 at 12.52.09@2x
CleanShot 2026-01-26 at 12.52.09@2x2418×884 183 KB

5

I got word from another support engineer that this issue was related to an incident and has sense been resolved.

Please let me know if anyone is still experience this issue.