AI & Agent Dev Bug Sandbox Back to Radar

Extension Description Text Overflows And Overlaps The Enabled Toggle On Database > Extensions Page

In the Supabase dashboard Extensions table, longer descriptions are rendered without wrapping or max-width constraints, causing text to overflow behind the sticky 'Enabled' toggle column. This impacts readability and usability.

mediumConfidence 75%Next.js

Origin Analysis

The description cell in the Extensions table lacks a width constraint and uses default white-space handling that prevents wrapping; the sticky toggle column is positioned above the overflowing text, resulting in overlap.

1. Navigate to Database > Extensions in the Supabase dashboard. 2. Locate rows with long descriptions such as pgcrypto, pg_stat_statements, or vector. 3. Observe that the description text runs behind the right-side 'Enabled' toggle instead of wrapping within its column.

Fixing Code Block

<td className="hidden lg:table-cell">
  <div className="max-w-full whitespace-normal break-words">
    {extension.comment}
  </div>
</td>

Adding whitespace-normal ensures the text wraps according to normal rules, and break-words allows breaking within long words or strings. The max-w-full (or min-w-0 on the cell) allows the cell to shrink within a flex/grid layout, preventing overflow into the sticky toggle column.

Edge Case Audit

Potential regression: using break-words may cause long, unbroken strings to wrap at arbitrary points, slightly increasing row height; if the table uses fixed column widths, ensure the description column has a defined width or max-width. Test across Chrome, Firefox, Safari, and responsive breakpoints. Rollback by removing the added classes if layout shift occurs.