Major Table Related UX Improvements (#14102)

- Removed manual table column resizing and header resize handles from
shared desktop tables.
- Added shared responsive column-hide behavior with explicit hide order
per table surface.
- Updated track tables to support combined `Track + Artist` cells
(library, playlist detail, history), including inline artwork in those
combined rows.
- Tightened/fixed column widths, drop timing, and header alignment so
columns hide before clipping and headers align with cell content.
- Updated fan clubs leaderboard and USDC purchases/withdrawals table
behavior to match the new shared table rules.

**Desktop routes/surfaces to test**
- Library: Tracks table  
- Collection page: Playlist detail table, Album detail table  
- History page: Tracks table  
- Dashboard page: Tracks tab, Albums tab  
- Fan Clubs / Coins: Leaderboard table view  
- Pay & Earn: Your Purchases, Withdrawal History, Sales, Audio
Transactions

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Ray Jacobson <raymondjacobson@users.noreply.github.com>

Author: 3 people

packages/common/src/adapters/audioTransactions.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  TransactionMethod,
+  TransactionType
+} from '~/store/ui/transaction-details/types'
+
+import { audioTransactionFromSdk } from './audioTransactions'
+
+const makeSdkTransaction = (overrides: Record<string, unknown> = {}) =>
+  ({
+    signature: 'signature',
+    transactionType: 'transfer',
+    method: 'receive',
+    transactionDate: '2026-01-01T00:00:00.000Z',
+    change: '100000000',
+    balance: '500000000',
+    metadata: 'metadata',
+    ...overrides
+  }) as any
+
+describe('audioTransactionFromSdk', () => {
+  it('maps tip transactions', () => {
+    const tipTx = audioTransactionFromSdk(
+      makeSdkTransaction({
+        transactionType: 'tip',
+        method: 'send'
+      })
+    )
+
+    expect(tipTx.transactionType).toBe(TransactionType.TIP)
+    expect(tipTx.method).toBe(TransactionMethod.SEND)
+  })
+
+  it('throws on unknown transaction type', () => {
+    expect(() =>
+      audioTransactionFromSdk(
+        makeSdkTransaction({
+          transactionType: 'unknown_type'
+        })
+      )
+    ).toThrow('Unknown Transaction')
+  })
+})

packages/common/src/adapters/audioTransactions.ts

@@ -16,7 +16,8 @@ export const audioTransactionFromSdk = (
     'purchase unknown': TransactionType.PURCHASE,
     user_reward: TransactionType.CHALLENGE_REWARD,
     trending_reward: TransactionType.TRENDING_REWARD,
-    transfer: TransactionType.TRANSFER
+    transfer: TransactionType.TRANSFER,
+    tip: TransactionType.TIP
   }
 
   const txType = transactionTypeMap[tx.transactionType]
@@ -48,6 +49,7 @@ export const audioTransactionFromSdk = (
         metadata: undefined
       }
     case TransactionType.TRANSFER:
+    case TransactionType.TIP:
       return {
         signature: tx.signature,
         transactionType: txType,

packages/common/src/store/ui/transaction-details/types.ts

@@ -7,7 +7,8 @@ export enum TransactionType {
   PURCHASE = 'PURCHASE',
   CHALLENGE_REWARD = 'CHALLENGE_REWARD',
   TRENDING_REWARD = 'TRENDING_REWARD',
-  TRANSFER = 'TRANSFER'
+  TRANSFER = 'TRANSFER',
+  TIP = 'TIP'
 }
 
 export enum TransactionMethod {
@@ -50,7 +51,7 @@ export type TransactionDetails =
     }
   | {
       signature: string
-      transactionType: TransactionType.TRANSFER
+      transactionType: TransactionType.TRANSFER | TransactionType.TIP
       method: TransactionMethod.SEND | TransactionMethod.RECEIVE
       date: string
       change: StringAudio

packages/web/src/components/audio-transaction-icon/AudioTransactionIcon.tsx

@@ -30,6 +30,7 @@ const typeIconSvgMap: Record<TransactionType, IconComponent | null> = {
   [TransactionType.CHALLENGE_REWARD]: IconTrophy,
   [TransactionType.PURCHASE]: null, // Not needed, AppLogo is used for purchases
   [TransactionType.TRANSFER]: IconTransaction,
+  [TransactionType.TIP]: IconTransaction,
   [TransactionType.TRENDING_REWARD]: IconTrophy
 } as const
 
@@ -54,6 +55,7 @@ const typeIconMap: Record<
   [TransactionType.CHALLENGE_REWARD]: TypeIcon,
   [TransactionType.PURCHASE]: AppLogo,
   [TransactionType.TRANSFER]: TypeIcon,
+  [TransactionType.TIP]: TypeIcon,
   [TransactionType.TRENDING_REWARD]: TypeIcon
 } as const
 

packages/web/src/components/audio-transactions-table/AudioTransactionsTable.module.css

@@ -12,17 +12,15 @@
   line-height: 1.2;
 }
 
-.icon {
-  margin-right: 22px;
+.typeText {
+  line-height: 150%;
 }
 
-.changeCell.increase {
-  color: var(--harmony-green);
-}
-.changeCell.decrease {
-  color: var(--harmony-orange);
+.tableWrapper {
+  padding-bottom: 0;
+  margin-bottom: 96px;
 }
 
-.typeText {
-  line-height: 150%;
+.tableWrapper :global([class*='showMoreContainer']) {
+  background-color: transparent;
 }

packages/web/src/components/audio-transactions-table/AudioTransactionsTable.tsx

@@ -9,17 +9,17 @@ import {
 import { dayjs } from '@audius/common/utils'
 import { wAUDIO } from '@audius/fixed-decimal'
 import { Tooltip } from '@audius/harmony'
-import cn from 'classnames'
 import { Cell, Row } from 'react-table'
 
-import { AudioTransactionIcon } from 'components/audio-transaction-icon'
 import { Table } from 'components/table'
 import { TableProps } from 'components/table/Table'
+import { RESPONSIVE_TABLE_POLICIES } from 'components/table/responsivePolicies'
 
 import styles from './AudioTransactionsTable.module.css'
 
 const transactionTypeLabelMap: Record<TransactionType, string> = {
   [TransactionType.TRANSFER]: '$AUDIO',
+  [TransactionType.TIP]: 'Tip',
   [TransactionType.CHALLENGE_REWARD]: '$AUDIO Reward Earned',
   [TransactionType.TRENDING_REWARD]: 'Trending Competition Award',
   [TransactionType.PURCHASE]: 'Purchased $AUDIO'
@@ -75,16 +75,13 @@ const renderTransactionTypeCell = (cellInfo: TransactionCell) => {
   const methodText =
     transactionMethodLabelMap[method as TransactionMethod] ?? ''
 
-  const isTransferType = transactionType === TransactionType.TRANSFER
+  const isMethodType =
+    transactionType === TransactionType.TRANSFER ||
+    transactionType === TransactionType.TIP
   return (
-    <>
-      <div className={styles.icon}>
-        <AudioTransactionIcon type={transactionType} method={method} />
-      </div>
-      <span className={styles.typeText}>
-        {`${typeText} ${isTransferType ? methodText : ''}`.trim()}
-      </span>
-    </>
+    <span className={styles.typeText}>
+      {`${typeText} ${isMethodType ? methodText : ''}`.trim()}
+    </span>
   )
 }
 
@@ -113,12 +110,7 @@ const renderChangeCell = (cellInfo: TransactionCell) => {
       })} $AUDIO`}
       mount={'body'}
     >
-      <div
-        className={cn(
-          styles.changeCell,
-          isChangePositive(tx) ? styles.increase : styles.decrease
-        )}
-      >
+      <div>
         {wAUDIO(BigInt(change)).toLocaleString('en-US', {
           maximumFractionDigits: 0
         })}
@@ -210,6 +202,8 @@ export const AudioTransactionsTable = ({
       columns={tableColumns}
       onClickRow={handleClickRow}
       isEmptyRow={isEmptyRow}
+      responsiveColumns={RESPONSIVE_TABLE_POLICIES.audioTransactions}
+      wrapperClassName={styles.tableWrapper}
       {...other}
     />
   )

packages/web/src/components/collections-table/CollectionsTable.tsx

@@ -10,7 +10,14 @@ import cn from 'classnames'
 import { Cell, Row } from 'react-table'
 
 import { TextLink } from 'components/link'
-import { Table, alphaSorter, dateSorter, numericSorter } from 'components/table'
+import {
+  Table,
+  COLUMN_WIDTHS,
+  alphaSorter,
+  dateSorter,
+  numericSorter
+} from 'components/table'
+import type { TableProps } from 'components/table/Table'
 
 import styles from './CollectionsTable.module.css'
 import { CollectionsTableOverflowMenuButton } from './CollectionsTableOverflowMenuButton'
@@ -48,6 +55,7 @@ type CollectionsTableProps = {
   showMoreLimit?: number
   totalRowCount?: number
   tableHeaderClassName?: string
+  responsiveColumns?: TableProps['responsiveColumns']
 }
 
 const defaultColumns: CollectionsTableColumn[] = [
@@ -75,7 +83,8 @@ export const CollectionsTable = ({
   scrollRef,
   showMoreLimit,
   totalRowCount,
-  tableHeaderClassName
+  tableHeaderClassName,
+  responsiveColumns
 }: CollectionsTableProps) => {
   // Cell Render Functions
   const renderNameCell = useCallback((cellInfo: CollectionCell) => {
@@ -156,8 +165,9 @@ export const CollectionsTable = ({
         Header: 'Album Name',
         accessor: 'title',
         Cell: renderNameCell,
-        maxWidth: 300,
-        width: 120,
+        minWidth: COLUMN_WIDTHS.artistName,
+        width: COLUMN_WIDTHS.artistName,
+        maxWidth: Number.MAX_SAFE_INTEGER,
         sortTitle: 'Album Name',
         sorter: alphaSorter('title'),
         align: 'left'
@@ -167,44 +177,53 @@ export const CollectionsTable = ({
         Header: 'Released',
         accessor: 'created_at',
         Cell: renderReleaseDateCell,
-        maxWidth: 160,
+        minWidth: COLUMN_WIDTHS.date,
+        width: COLUMN_WIDTHS.date,
+        maxWidth: COLUMN_WIDTHS.date,
         sortTitle: 'Date Released',
         sorter: dateSorter('created_at'),
+        disableResizing: true,
         align: 'right'
       },
       reposts: {
         id: 'reposts',
         Header: 'Reposts',
         accessor: 'repost_count',
         Cell: renderRepostsCell,
-        maxWidth: 160,
+        minWidth: COLUMN_WIDTHS.numeric,
+        width: COLUMN_WIDTHS.numeric,
+        maxWidth: COLUMN_WIDTHS.numeric,
         sortTitle: 'Reposts',
         sorter: numericSorter('repost_count'),
+        disableResizing: true,
         align: 'right'
       },
       saves: {
         id: 'saves',
         Header: 'Favorites',
         accessor: 'save_count',
         Cell: renderSavesCell,
-        maxWidth: 160,
+        minWidth: COLUMN_WIDTHS.numeric,
+        width: COLUMN_WIDTHS.numeric,
+        maxWidth: COLUMN_WIDTHS.numeric,
         sortTitle: 'Favorites',
         sorter: numericSorter('save_count'),
+        disableResizing: true,
         align: 'right'
       },
       overflowMenu: {
         id: 'overflowMenu',
         Cell: renderOverflowMenuCell,
-        minWidth: 64,
-        maxWidth: 64,
-        width: 64,
+        minWidth: COLUMN_WIDTHS.overflowMenu,
+        maxWidth: COLUMN_WIDTHS.overflowMenu,
+        width: COLUMN_WIDTHS.overflowMenu,
         disableResizing: true,
         disableSortBy: true
       },
       spacer: {
         id: 'spacer',
-        maxWidth: 24,
-        minWidth: 24,
+        maxWidth: COLUMN_WIDTHS.spacer,
+        minWidth: COLUMN_WIDTHS.spacer,
         disableSortBy: true,
         disableResizing: true
       }
@@ -262,6 +281,7 @@ export const CollectionsTable = ({
       showMoreLimit={showMoreLimit}
       totalRowCount={totalRowCount}
       tableHeaderClassName={tableHeaderClassName}
+      responsiveColumns={responsiveColumns}
     />
   )
 }

packages/web/src/components/table/Table.module.css

@@ -50,40 +50,44 @@
 .tableHeader {
   position: relative;
   background-color: var(--harmony-white);
-  padding-left: 12px;
+  padding-left: 0px;
   padding-right: 12px;
   line-height: 41px;
   user-select: none;
 }
 
-.tableHeader.hasSorter .textCell {
-  padding-right: 6px;
-}
-
-.titleHeader + .titleHeader::before {
-  content: '';
-  position: absolute;
-  height: 18px;
-  width: 1px;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-  background-color: var(--harmony-n-100);
-}
-
 .textCell {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.tableHeader.leftAlign .headerContent {
+  justify-content: flex-start;
+  padding-left: 12px;
+}
+
+.tableHeader.rightAlign .headerContent {
+  justify-content: flex-end;
+}
+
+.tableHeader:not(.leftAlign):not(.rightAlign) .headerContent {
+  justify-content: center;
+}
+
 .sortCaretContainer {
-  position: absolute;
   display: flex;
   flex-direction: column;
-  top: 50%;
-  right: 6px;
-  transform: translateY(-50%);
+  flex: 0 0 auto;
+  justify-content: center;
 }
 
 .sortCaret {
@@ -259,15 +263,6 @@
   text-overflow: ellipsis;
 }
 
-.resizer {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
-  right: -2px;
-  width: 6px;
-}
-
 .leftAlign {
   text-align: left;
   justify-content: left;