Fix long URLs pushing action buttons off-screen in Links table

[nielskaspers]

Summary

Long destination URLs in the Links table push the edit/delete action buttons off-screen, making them inaccessible.

Issue

Fixes #4136

Changes

• Added style={{ minWidth: 0 }} to the Link and Destination URL DataColumn components in LinksTable.tsx

Root Cause

The table uses CSS Grid with 1fr columns, which defaults to minmax(auto, 1fr). The auto minimum prevents grid items from shrinking below their content's intrinsic width. This overrides the existing text truncation in the ExternalLink component (which already has overflow="hidden" and truncate).

Setting minWidth: 0 on the grid cells allows them to shrink below content width, enabling the existing truncation to work correctly.

Testing

• Verified that ExternalLink already implements truncation via Row overflow="hidden" and Text truncate
• The style prop flows through DataColumn → DataTable → TableCell → Cell (react-aria) to the DOM element
• With minWidth: 0, the CSS Grid items can shrink and text truncation activates for long URLs

[vercel]

@nielskaspers is attempting to deploy a commit to the Umami Software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR applies a targeted, correct CSS fix for long destination URLs pushing edit/delete action buttons off-screen in the Links table. By adding style={{ minWidth: 0 }} to the slug and url DataColumn components, it overrides the default CSS Grid minmax(auto, 1fr) behaviour that was preventing those columns from shrinking below their content's intrinsic width — enabling the existing overflow="hidden" / truncate props on ExternalLink to work as intended.

• Fix is correct and well-explained — minWidth: 0 is the standard idiomatic solution for this CSS Grid overflow pattern, and the PR description accurately describes the root cause.
• PixelsTable has the identical issue — its URL DataColumn wraps an ExternalLink without style={{ minWidth: 0 }}, so long pixel tracking URLs would reproduce the same button-overflow bug.
• The name column in LinksTable is not fixed, but since names tend to be short this is low priority in practice.

Confidence Score: 4/5

Safe to merge — the fix is correct, minimal, and well-understood, with only a minor omission of the same fix in PixelsTable.

The change is a two-line CSS tweak using a well-known CSS Grid pattern. The PR description accurately explains the root cause and the style prop flow through the component tree. The only concern is that the analogous PixelsTable component has the same bug and was not addressed in this PR.

src/app/(main)/pixels/PixelsTable.tsx — the URL DataColumn there also needs style={{ minWidth: 0 }} to prevent the same overflow bug.

Important Files Changed

Filename	Overview
src/app/(main)/links/LinksTable.tsx	Adds style={{ minWidth: 0 }} to the slug and url DataColumns so CSS Grid allows those cells to shrink, enabling the existing ExternalLink truncation to activate correctly.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph before ["Before fix (broken)"]
        A[CSS Grid cell] -->|default min: auto| B[DataColumn]
        B --> C[ExternalLink]
        C -->|overflow hidden + truncate| D[Truncation BLOCKED]
        D --> E["⚠ Action buttons pushed off-screen"]
    end

    subgraph after ["After fix (working)"]
        F["CSS Grid cell\nminWidth: 0"] -->|min: 0, can shrink| G[DataColumn]
        G --> H[ExternalLink]
        H -->|overflow hidden + truncate| I[Truncation ACTIVE]
        I --> J["✅ Action buttons remain visible"]
    end

    style E fill:#ff6b6b,color:#fff
    style J fill:#51cf66,color:#fff

Loading

Comments Outside Diff (1)

1. src/app/(main)/pixels/PixelsTable.tsx, line 21 (link)

   Same overflow issue exists in PixelsTable

   PixelsTable has a structurally identical URL column — a DataColumn wrapping an ExternalLink — but is missing style={{ minWidth: 0 }}. Long pixel tracking URLs will push the edit/delete action buttons off-screen in exactly the same way as issue Long URLs push action buttons out of view in Links table - Can't suppress Link #4136, since the CSS Grid auto minimum prevents those cells from shrinking.

   Consider applying the same fix here for consistency:

_{Reviews (1): Last reviewed commit: "Fix long URLs pushing action buttons off..." | Re-trigger Greptile}