fix: responsive audit log table for smaller screens

[TerrifiedBug]

Summary

• Hide IP Address and Details columns on smaller screens (below xl and lg breakpoints) since both are accessible in the expanded row
• Switch from table-fixed to auto table layout so visible columns size naturally
• Show IP address in the expanded row detail view when the column is hidden
• Add title tooltip on Entity ID cells for full value on hover

Test plan

• View audit log page on a 13" laptop (~1440px width) — IP Address column should be hidden, other columns should have proper spacing
• Resize browser below 1024px — Details column should also hide
• Expand a row when columns are hidden — verify IP address appears in the detail view
• View on a large screen (1920px+) — all columns should be visible as before

[greptile-apps]

Greptile Summary

This PR makes the audit log table responsive by hiding the IP Address column below the xl breakpoint (1280px) and the Details column below the lg breakpoint (1024px). It also reveals the IP address inside the expanded row detail view when the column is hidden, adds a hover title tooltip on Entity ID cells, and switches from table-fixed to auto table layout so remaining columns size naturally.

Key changes:

• IP Address <TableHead> and <TableCell> both get hidden xl:table-cell — header and body cells match correctly.
• Details <TableHead> and <TableCell> both get hidden lg:table-cell — consistent and correct.
• Expanded detail row uses colSpan={99} instead of the previous hardcoded colSpan={8}, which correctly spans all visible columns regardless of how many are currently rendered (hidden cells with display:none are excluded from the layout).
• IP address is conditionally rendered in the expanded row with xl:hidden so it only appears when the column itself is not visible — logic is sound.
• Full diff/metadata content remains accessible via the expanded row regardless of screen size, satisfying the PR's stated goal.

Confidence Score: 5/5

• This PR is safe to merge — it is a pure UI/layout change with no data, logic, or security implications.
• All column visibility changes are symmetrically applied to both header and data cells. The responsive breakpoints match the PR description. The colSpan=99 pattern is valid HTML and correctly handles variable column counts caused by responsive hiding. The IP address in the expanded row is correctly gated on both the data being present and the column being hidden. No backend, auth, or data-fetching code is touched.
• No files require special attention.

Important Files Changed

Filename	Overview
src/app/(dashboard)/audit/page.tsx	Responsive table improvements: hides IP Address/Details columns on smaller screens, shows IP in expanded row when column is hidden, adds Entity ID tooltip, and replaces hardcoded colSpan with colSpan=99. Changes are correct and consistent across header and body cells.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Screen Width] --> B{>= 1280px xl}
    A --> C{>= 1024px lg, < 1280px}
    A --> D{< 1024px}

    B --> B1[Show: Timestamp, User, IP Address, Action, Entity Type, Entity ID, Details]
    C --> C1[Show: Timestamp, User, Action, Entity Type, Entity ID, Details\nHide: IP Address]
    D --> D1[Show: Timestamp, User, Action, Entity Type, Entity ID\nHide: IP Address + Details]

    B1 --> E{Row Expanded?}
    C1 --> E
    D1 --> E

    E -->|Yes| F[Expanded Detail Row colSpan=99]
    F --> G{< 1280px xl?}
    G -->|Yes + entry.ipAddress present| H[Show IP Address section]
    G -->|No| I[IP Address section hidden]
    F --> J[Always show Metadata / Diff sections if present]

Loading

_{Last reviewed commit: b22512b}