Address page: change list views to table views on mobile

[tom2drum]

Description and Related Issue(s)

Resolves #3502

On mobile, address-related tabs and several global list pages previously rendered a separate list layout while desktop used tables. This PR unifies those views to use the table layout on all breakpoints, with horizontal scrolling on small screens.

Proposed Changes

• Replace mobile list layouts with table views across address page tabs (transactions, token transfers, blocks validated, coin balance history, internal txs, tokens, deposits/withdrawals, epoch rewards, account history, etc.) and related global pages (transactions index, user ops).
• Add TableContainerScrollable for mobile horizontal scroll and disable sticky table headers below lg (tables live inside a scroll container on mobile).
• Remove redundant list/table branching and mobile-only list item components where tables now cover both breakpoints.
• Move beacon-chain AddressWithdrawals into the beacon-chain feature folder (alongside deposits).
• Add TODO notes on TableViewToggleButton and useTableViewValue for eventual cleanup once mobile tables are finalized.

Breaking or Incompatible Changes

None.

Additional Information

N/A

Checklist for PR author

• I have tested these changes locally.
• I added tests to cover any new functionality, following this guide
• Whenever I fix a bug, I include a regression test to ensure that the bug does not reappear silently.
• If I have added a feature or functionality that is not privacy-compliant (e.g., tracking, analytics, third-party services), I have disabled it for private mode.
• If I have added, changed, renamed, or removed an environment variable
  • I updated the list of environment variables in the documentation
  • I made the necessary changes to the validator script according to the guide
  • I added "ENVs" label to this pull request

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2ab06296-8cf3-4e6b-8316-a387d9ae83d8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR updates address-related tabs and several list pages to use the table layout on mobile as well as desktop, introducing a shared horizontal scroll container for small screens and reducing/removing mobile-specific list branches.

Changes:

• Introduces TableContainerScrollable and adjusts table styling so tables can be horizontally scrolled on mobile while disabling sticky headers below lg.
• Refactors multiple address tabs and related pages (txs, token transfers, internal txs, balances, blocks validated, user ops, epoch rewards, deposits/withdrawals, etc.) to render tables across breakpoints and remove redundant mobile list branches.
• Makes small layout/tuning adjustments (table cell padding, min table widths, ActionBar padding, routed tabs props) to better fit mobile table UX.

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/toolkit/theme/recipes/table.recipe.ts	Adjusts table cell vertical padding responsively for mobile vs desktop.
src/toolkit/chakra/table.tsx	Disables sticky headers on mobile and adds TableContainerScrollable wrapper.
src/slices/tx/pages/index/list/TxsWithApiSorting.tsx	Renames and forwards prop controlling mobile table rendering.
src/slices/tx/pages/index/list/TxsHeaderMobile.tsx	Removes table-view toggle button slot from mobile header.
src/slices/tx/pages/index/list/TxsContent.tsx	Refactors list/table branching and wraps tables with scroll container on mobile.
src/slices/token/pages/address/ERC20TokensTable.tsx	Sets a minimum table width to support horizontal scrolling.
src/slices/token/pages/address/ERC20Tokens.tsx	Removes mobile list rendering; always uses table with scroll container.
src/slices/token/pages/address/AddressNFTs.tsx	Tweaks ActionBar spacing for mobile.
src/slices/token/pages/address/AddressCollections.tsx	Tweaks ActionBar spacing for mobile.
src/slices/token-transfer/components/list/TokenTransferTableItem.tsx	Forces compact address display mode on small screens.
src/slices/token-transfer/components/list/TokenTransferList.tsx	Adds TODO for eventual removal once mobile tables are finalized.
src/slices/address/pages/details/txs/AddressTxs.tsx	Enables table view on mobile for address txs tab.
src/slices/address/pages/details/tokens/AddressTokens.tsx	Simplifies tab list props and enables sticky tabs on mobile.
src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx	Removes mobile list; wraps token transfer table with scroll container.
src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx	Removes mobile list; wraps internal txs table with scroll container.
src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx	Removes mobile list; uses min-width table inside scroll container.
src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx	Removes mobile list; uses min-width table inside scroll container.
src/slices/address/pages/details/Address.tsx	Moves beacon-chain AddressWithdrawals import to feature folder location.
src/shell/page/action-bar/ActionBar.tsx	Normalizes ActionBar bottom padding across breakpoints.
src/shared/lists/useTableViewValue.ts	Adds TODO indicating planned removal of legacy mobile view-flag hook.
src/shared/lists/TableViewToggleButton.tsx	Adds TODO indicating planned removal of legacy mobile view toggle UI.
src/features/user-ops/pages/index/UserOpsContent.tsx	Removes mobile list; wraps user ops table with scroll container.
src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx	Removes mobile list; uses min-width table inside scroll container.
src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx	Sets a minimum table width to support horizontal scrolling.
src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx	Removes mobile list; wraps tokens table with scroll container; tweaks spacing.
src/features/multichain/pages/address/MultichainAddressTxs.tsx	Enables table view on mobile for multichain address txs.
src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx	Removes mobile table/list toggle; forces table view (sticky header desktop only).
src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx	Removes mobile list; wraps epoch rewards table with scroll container.
src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx	Small width tweak for the “Transaction hash” column.
src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals.tsx	Removes mobile list; wraps withdrawals table with scroll container.
src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx	Removes mobile list; wraps deposits table with scroll container.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.