fix: improve traces table ux by making the table scrollable

[ahmadshaheer]

Summary

In case we have too many columns in the list view of traces explorer, the UI breaks, and the columns can't be resized properly. This PR fixes these issues by making the table horizontally scrollable.

Related Issues / PR's

close #6326

Screenshots

2024-11-12.09-56-20.mov

Affected Areas and Manually Tested Areas

• List view of traces explorer

---

Important

Makes the traces explorer table horizontally scrollable to handle cases with too many columns.

• Behavior:
  • Makes the table in ListView/index.tsx horizontally scrollable by setting scroll={{ x: 'max-content' }} in the ResizeTable component.
  • Adjusts .trace-explorer width in TracesExplorer.styles.scss to calc(100% - 260px) to accommodate the scrollable table.
• Affected Areas:
  • List view of traces explorer, specifically when there are too many columns.

^{This description was created by for a50bd99. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to bcb439e in 31 seconds

More details

• Looked at 27 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss:51

• Draft comment:
  Ensure that the width adjustment for .trace-explorer in light mode is consistent with the dark mode to avoid layout issues. Consider using calc(100% - 260px) for consistency.
• Reason this comment was not posted:
  Comment did not seem useful.

Workflow ID: wflow_PlOPAEUtOogskxQX

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[YounixM]

@ahmadshaheer : Why -260px?

[ahmadshaheer]

@YounixM, the traces filter has a width of 260px. I subtracted it from 100% to ensure that the traces explorer slide to the side when there are too many columns.