[UI/UX] Improve click behavior in tables

[mmabrouk]

Whenever we have a table where the rows are clickable. We should make sure that the area around other actions in the table activate these actions and not open the thing. See example below

[linear]

AGE-3514

[VahantSharma]

@mmabrouk I’ve looked into the table click behavior across the codebase and this seems to be a consistent pattern rather than a one-off issue.

Root cause

Several tables implement row-level navigation via onRow / onClick, but the handler doesn’t guard against clicks originating from interactive child elements (checkboxes, dropdown menus, action buttons). As a result, clicks near or on these controls can unintentionally trigger row navigation.

Proposed approach (incremental & low-risk)

I suggest handling this in small, safe steps:

1. Establish a shared guard utility
   Extract a reusable shouldIgnoreRowClick(event) helper (based on the existing logic already used in InfiniteVirtualTable) to centralize the interaction rules.

2. Adopt it incrementally in tables with row navigation
   Update tables to short-circuit the row click when the event originates from interactive elements (buttons, inputs, links, menu triggers, etc.), while keeping existing behavior unchanged elsewhere.

3. Keep child actions defensive
   Interactive elements should continue to call stopPropagation, but the row handler itself should also be defensive so future actions don’t accidentally regress this.

This keeps the fix:

• Consistent across tables
• Easy to reason about
• Low-risk (no global behavior changes)
• Incrementally reviewable

I’m starting with a small PR to establish the shared utility and validate the pattern, and can follow up with targeted fixes for affected tables (Apps, Variants, Prompts, evaluation flows, etc.) if this approach sounds reasonable.

Happy to adjust based on feedback 👍

[mmabrouk]

Thanks @VahantSharma

cc @ardaerzin what do you think? (#3262 and #3263 )

[rishika553]

I reviewed the discussion and the proposed shared guard utility approach makes sense. Centralizing the row click guard should help prevent regressions across tables.

Thanks for the detailed breakdown — I learned a lot from the incremental rollout strategy.

[Quantum0uasar]

Hi! I'd love to work on this UX improvement. The issue is clear — when a table row has multiple interactive elements (like a dropdown vs. row click to open), the click target areas need to be properly isolated using stopPropagation or pointer-events to prevent unintended row opens. I have React and frontend experience and would be happy to implement this fix. Can I take this on?

[ardaerzin]

@Quantum0uasar sure feel free to get in touch with me if you have any questions

[Quantum0uasar]

Thanks so much @ardaerzin! Really appreciate it. I'll start going through the codebase now and will reach out once I have a clearer picture of the changes needed. Looking forward to contributing!