Refactor table components and adjust paddings

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.

Author: julianbaker

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

@@ -14,8 +14,8 @@ import { Cell, Row } from 'react-table'
 
 import { AudioTransactionIcon } from 'components/audio-transaction-icon'
 import { Table } from 'components/table'
-import { RESPONSIVE_TABLE_POLICIES } from 'components/table/responsivePolicies'
 import { TableProps } from 'components/table/Table'
+import { RESPONSIVE_TABLE_POLICIES } from 'components/table/responsivePolicies'
 
 import styles from './AudioTransactionsTable.module.css'
 

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

@@ -72,6 +72,7 @@
 
 .tableHeader.leftAlign .headerContent {
   justify-content: flex-start;
+  padding-left: 12px;
 }
 
 .tableHeader.rightAlign .headerContent {

packages/web/src/components/table/Table.tsx

@@ -196,10 +196,7 @@ export const Table = ({
 
   const getColumnId = (column: any) => {
     if (typeof column?.id === 'string' && column.id.length > 0) return column.id
-    if (
-      typeof column?.accessor === 'string' &&
-      column.accessor.length > 0
-    ) {
+    if (typeof column?.accessor === 'string' && column.accessor.length > 0) {
       return column.accessor
     }
     return null

packages/web/src/components/table/responsiveColumns.ts

@@ -82,17 +82,11 @@ export const getHiddenResponsiveColumns = ({
 
     if (!activeBreakpoint) return new Set<string>()
 
-    return new Set(
-      activeBreakpoint.hide.filter((id) => !alwaysVisible.has(id))
-    )
+    return new Set(activeBreakpoint.hide.filter((id) => !alwaysVisible.has(id)))
   }
 
   const hideOrder = responsiveColumns.hideOrder ?? []
-  if (
-    !hideOrder.length ||
-    !isNumber(containerWidth) ||
-    containerWidth <= 0
-  ) {
+  if (!hideOrder.length || !isNumber(containerWidth) || containerWidth <= 0) {
     return new Set<string>()
   }