Open
Conversation
Introduce responsive column handling for shared table components. Adds responsiveColumns logic (responsiveColumns.ts) and a set of breakpoint policies (responsivePolicies.ts), plus unit tests for logic and coverage. Table component now measures wrapper width (ResizeObserver/fallback) and computes hidden columns to show/hide based on policy; header layout CSS updated to support centered/left/right alignment and caret positioning. Wire responsiveColumns into existing table consumers (audio transactions, artist coins, collections, pay-and-earn tables, collection page) and remove legacy column-resize UI. Also enhance TracksTable: new stacked artist option (showArtistInTrackNameColumn), MiniTrackArtwork, related styles and tests, and various column min/max width adjustments.
Multiple updates to table rendering, responsive behavior, and tracks table performance: - Table/responsive logic - Add columnChromeWidth support and factor per-column chrome into responsive collapse budgeting. - Prefer column.minWidth when budgeting so columns shrink before being dropped. - Update responsive policies to a simpler hideOrder/alwaysVisible shape and tweak policies for several tables. - Update tests to cover chrome budgeting and new hide behavior. - Table component - Track container width via ResizeObserver and compute hidden columns from responsive policy (include chrome width constant). - Use visibleColumns for react-table initialization. - TracksTable - Significant render/perf changes: memoize MiniTrackArtwork, use refs for activeIndex, playing, data, access maps and handler callbacks to avoid frequent re-renders and stale closures. - Adjust many column min/width/max values and disable resizing for fixed columns. - Update artwork sizing, row/user-select styles, and track header layout to accommodate artwork. - Numerous callbacks updated to read from refs instead of capturing changing values. - Library page & hook - Memoize and streamline filtered/formatted entries to avoid repeated formatting work; simplify data source generation with useMemo. - Fix active index calculation to use formatted lists consistently. - Artist coins table - Remove unused CSS file and inline header/column layout changes: add artist column, adjust column widths, header paddings, and disable resizing for fixed columns. - Remove reliance on tableHeader class. - Purchases & Withdrawals UI tweaks - Align purchase header with artwork spacing and update artwork dimensions and text truncation in TrackNameWithArtwork. - Add method header padding for withdrawals. - Misc - Update various CSS tweaks (padding, artwork sizes, user-select) and small component refinements. Overall these changes improve responsive column budgeting (including visual chrome), reduce unnecessary re-renders in the tracks table, and align table headers and column sizing across several pages.
Code cleanup and small UI/padding tweaks across table-related components. - Reordered/imports and minor formatting fixes in AudioTransactionsTable and Table files. - Added left padding to .tableHeader.leftAlign (.table/Table.module.css) to align header content. - Cleaned up responsiveColumns and Table logic formatting (no behavior changes). - Large formatting/refactor in TracksTable: reflowed MiniTrackArtwork and several cell renderers, standardized destructuring of trackAccessMapRef.current, and forwarded showArtistInTrackNameColumn to the Table props. - Adjusted header paddings in ArtistCoinsTable (Coin and Artist columns), TrackNameWithArtwork.module.css, and WithdrawalsTable.module.css. - Minor import/JSX formatting fixes in PurchasesTable. These changes are primarily stylistic and layout-related, preserving existing behavior while improving readability and consistent spacing.
|
Co-authored-by: Ray Jacobson <raymondjacobson@users.noreply.github.com>
Apply code-style and formatting cleanup across tests and a component: reflow long expressions and expand object literals in responsiveColumns.test.ts, simplify the TextLink mock and reformat PurchaseableContentType in TracksTable.test.tsx, and remove redundant parentheses in TransactionDetailsContent.tsx. These are stylistic changes only and do not alter runtime behavior.
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14102.audius.workers.dev Unique preview for this PR (deployed from this branch). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Track + Artistcells (library, playlist detail, history), including inline artwork in those combined rows.Desktop routes/surfaces to test