fix: prevent horizontal scroll on expanded audit log rows

[TerrifiedBug]

Summary

• Wrap audit table in overflow-x-auto container with table-fixed layout
• Fix expanded detail grid columns from auto_1fr to auto_minmax(0,1fr) so values respect container bounds
• Add break-all and whitespace-pre-wrap on long metadata/diff values to prevent content from pushing the page wider

Test plan

• Open audit log page, expand a row with long metadata (e.g. a deploy with YAML config diff)
• Verify no horizontal scrollbar appears on the page
• Verify expanded JSON values wrap within the table bounds

[greptile-apps]

Greptile Summary

This PR fixes horizontal scroll on the audit log page by containing the table in an overflow-x-auto wrapper and applying table-fixed w-full so the table respects its container bounds. The root cause of values pushing the layout wider — CSS Grid's 1fr minimum of auto — is correctly addressed by switching to minmax(0, 1fr), and break-all / whitespace-pre-wrap on expanded cell values ensures long strings wrap rather than overflow.

• overflow-x-auto div wraps the Table, confining any horizontal scroll to that element rather than the page
• table-fixed w-full constrains the table to its container, which also gives the inner CSS Grid cells a finite width to measure against
• grid-cols-[auto_minmax(0,1fr)] replaces [auto_1fr] in both the metadata and diff grids — the key correctness fix; 1fr without minmax(0,...) allows the column to expand to fit content, defeating the constraint
• <pre class="whitespace-pre-wrap break-all overflow-hidden"> replaces <span> for object values, ensuring pretty-printed JSON wraps within the column
• whitespace-nowrap is added to key-label spans so labels stay on one line while only the value column wraps
• The "Load more" button is correctly moved outside the overflow-x-auto container so it remains accessible without horizontal scrolling

Confidence Score: 5/5

• This PR is safe to merge — it is a pure CSS layout fix with no logic, data, or security implications.
• All three layers of the fix (overflow container, table-fixed, minmax grid columns) are well-understood CSS patterns applied correctly. The <pre> swap for object values with whitespace-pre-wrap break-all overflow-hidden is safe: Tailwind's preflight resets pre margins, and break-all ensures no single token can overflow before overflow-hidden clips it. No logic, auth, or data-access code was touched.
• No files require special attention.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Audit Page Root div"] --> B["Filter Bar Card"]
    A --> C{"Data state?"}
    C -->|Loading| D["Skeleton rows"]
    C -->|Empty| E["Empty state message"]
    C -->|Has data| F["Fragment <>"]
    F --> G["div.overflow-x-auto\n(new wrapper)"]
    G --> H["Table.table-fixed.w-full"]
    H --> I["TableHeader\n(8 columns)"]
    H --> J["TableBody\n(allItems.map)"]
    J --> K["TableRow\n(summary row)"]
    K -->|isExpanded && hasDetails| L["TableRow.bg-muted/30\n(expanded detail row)"]
    L --> M["TableCell colSpan=8"]
    M -->|hasMetadata| N["Details grid\ngrid-cols-auto_minmax(0,1fr)\n(fixed from auto_1fr)"]
    M -->|hasDiff| O["Changes grid\ngrid-cols-auto_minmax(0,1fr)\n(fixed from auto_1fr)"]
    N --> P["key span.whitespace-nowrap"]
    N --> Q{value type?}
    Q -->|object| R["pre.whitespace-pre-wrap\n.break-all.overflow-hidden"]
    Q -->|primitive| S["span.break-all"]
    F --> T["Load more Button\n(outside overflow-x-auto)"]

Loading

_{Last reviewed commit: f503497}