refactor: start refactoring Emotion CSS components

[therealemjy]

Changes

This PR serves as a proof of concept to refactor components using Emotion CSS and Style Components using LLMs so that they use Tailwind CSS instead. A Playwright config is added for LLMs to render the components and ensure the UI is exactly the same after each refactor. Other components will be refactored in subsequent PRs.

• add Playwright config to evm app
• add stories to components missing them
• refactor Table component to use Tailwind CSS classes instead of Emotion CSS

[changeset-bot]

🦋 Changeset detected

Latest commit: 766ffde

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@venusprotocol/evm	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dapp-preview	Ready	Preview	Jul 25, 2026 11:34am
dapp-testnet	Ready	Preview	Jul 25, 2026 11:34am
venus.io	Ready	Preview	Jul 25, 2026 11:34am

[greptile-apps]

Greptile Summary

This proof of concept migrates the Table component from Emotion to Tailwind and expands visual-development infrastructure.

• Adds Storybook stories and the providers needed to render application components.
• Adds Playwright configuration for application and Storybook targets.
• Adds controlled server-side sorting support to Table columns.
• Replaces Table, table-header, and responsive-card Emotion styles with Tailwind classes.

Confidence Score: 4/5

This PR should not merge until responsive cards expose the newly supported server-side sorting controls.

The Prime Leaderboard reward table uses sortable-only columns and a responsive breakpoint, but its only mobile sorting control filters those columns out and therefore disappears.

Files Needing Attention: apps/evm/src/components/Table/types.ts, apps/evm/src/components/Table/TableCards/index.tsx

Important Files Changed

Filename	Overview
apps/evm/src/components/Table/types.ts	Adds the server-side sortable column contract, but responsive cards do not honor it.
apps/evm/src/components/Table/TableCards/index.tsx	Migrates card styling to Tailwind while retaining a client-sort-only option filter that drops server-sortable columns.
apps/evm/src/components/Table/Head/index.tsx	Migrates header and sort-indicator styling to Tailwind and correctly recognizes both client- and server-sortable columns.
apps/evm/src/components/Table/index.tsx	Replaces the main Table Emotion styles with Tailwind and wires controlled ordering into desktop and card presentations.
apps/evm/.storybook/preview.tsx	Adds query, wallet, and analytics providers to the global Storybook decorator.
apps/evm/playwright.config.ts	Adds desktop and mobile Playwright projects with optional app or Storybook server startup.

_{Reviews (1): Last reviewed commit: "refactor: start refactoring Emotion CSS ..." | Re-trigger Greptile}

[github-actions]

Coverage Report for ./apps/evm

Status	Category	Percentage	Covered / Total
🔵	Lines	83.19%	52587 / 63208
🔵	Statements	83.19%	52587 / 63208
🔵	Functions	63.48%	692 / 1090
🔵	Branches	72.86%	6069 / 8329

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
apps/evm/src/components/Table/index.tsx	93.93%	82.69%	33.33%	93.93%	56, 67-71, 76-81, 108, 126
apps/evm/src/components/Table/storiesUtils.tsx	0%	0%	0%	0%	1-80
apps/evm/src/components/Table/Head/index.tsx	100%	95.65%	50%	100%
apps/evm/src/components/Table/TableCards/index.tsx	90.59%	100%	33.33%	90.59%	66-77, 129

Generated in workflow #13933 for commit 766ffde by the Vitest Coverage Report Action