SigNoz / signoz

SigNoz is an open-source observability platform native to OpenTelemetry with logs, traces and metrics in a single application. An open-source alternative to DataDog, NewRelic, etc. šŸ”„ šŸ–„. šŸ‘‰ Open source Application Performance Monitoring (APM) & Observability tool
https://signoz.io
Other
19.43k stars 1.31k forks source link

fix: improve traces table ux by making the table scrollable #6423

Open ahmadshaheer opened 1 week ago

ahmadshaheer commented 1 week ago

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 https://github.com/SigNoz/signoz/issues/6326

Screenshots

https://github.com/user-attachments/assets/7a0eb9b1-d00d-44dd-ac9e-3da9c8e4211e

Affected Areas and Manually Tested Areas


[!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 Ellipsis for a50bd9912aa04651a513ef43961a43e090d28ec6. It will automatically update as commits are pushed.