refactor(v3-uplift): shared card surface, unified page container, button min-width

Card/theme consistency across the app (follow-up to the Markets-page bug fixes):

- Button min-width: reset MUI's default 64px floor on MuiButton (minWidth:'unset') so
  buttons size to content; restore a scoped floor on ListButtonsColumn for row actions.
- Page container: parameterize ContentContainer with optional containerProps and drop the
  bespoke MarketContainer fork, so Markets uses the shared container (gains the standard
  40px top gap; the top panel keeps marketContainerProps for stat/table alignment).
- Card surface: new MuiPaper variant="card" (surface-elevated + 10px radius +
  figSurfaceShadow('shadow-stroke-1')) as one source of truth; ListWrapper adopts it, and
  the bespoke Paper cards across reserve-overview / staking / sGho / stkGho / migration /
  connect-wallet empty-states migrate to it.
- Markets Core assets card: drop the header pt override (matches the dashboard cards).
- Migration: strip the inner list surface on mobile to match desktop (no card-in-card).
- dev/components: show the new Paper "card" variant alongside the others.

Author: abjt14

pages/markets.page.tsx

@@ -1,20 +1,16 @@
-import { Box, Container } from '@mui/material';
-import { ReactNode, useEffect } from 'react';
+import { useEffect } from 'react';
+import { ContentContainer } from 'src/components/ContentContainer';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { MarketAssetsListContainer } from 'src/modules/markets/MarketAssetsListContainer';
 import { MarketsTopPanel } from 'src/modules/markets/MarketsTopPanel';
 import { useRootStore } from 'src/store/root';
 
-interface MarketContainerProps {
-  children: ReactNode;
-}
-
+// Markets-specific Container overrides, shared with MarketsTopPanel (`containerProps=`) so the
+// top-panel stats align with the asset table at Markets' wider max-width. The theme's MuiContainer
+// override already supplies display/flexDirection/flex + the 39px bottom padding, so only the wider
+// px/maxWidth are set here.
 export const marketContainerProps = {
   sx: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    pb: '39px',
     px: {
       xs: 2,
       xsm: 5,
@@ -33,10 +29,6 @@ export const marketContainerProps = {
   },
 };
 
-export const MarketContainer = ({ children }: MarketContainerProps) => {
-  return <Container {...marketContainerProps}>{children}</Container>;
-};
-
 export default function Markets() {
   const trackEvent = useRootStore((store) => store.trackEvent);
 
@@ -49,18 +41,9 @@ export default function Markets() {
   return (
     <>
       <MarketsTopPanel />
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          flex: 1,
-        }}
-      >
-        <MarketContainer>
-          <MarketAssetsListContainer />
-        </MarketContainer>
-      </Box>
+      <ContentContainer containerProps={marketContainerProps}>
+        <MarketAssetsListContainer />
+      </ContentContainer>
     </>
   );
 }

src/components/ConnectWalletPaper.tsx

@@ -16,6 +16,7 @@ export const ConnectWalletPaper = ({ description, sx, ...rest }: ConnectWalletPa
 
   return (
     <Paper
+      variant="card"
       {...rest}
       sx={{
         display: 'flex',

src/components/ConnectWalletPaperStaking.tsx

@@ -18,6 +18,7 @@ export const ConnectWalletPaperStaking = ({
 }: ConnectWalletPaperStakingProps) => {
   return (
     <Paper
+      variant="card"
       {...rest}
       sx={{
         display: 'flex',

src/components/ContentContainer.tsx

@@ -1,11 +1,14 @@
-import { Box, Container } from '@mui/material';
+import { Box, Container, ContainerProps } from '@mui/material';
 import { ReactNode } from 'react';
 
 interface ContentContainerProps {
   children: ReactNode;
+  // Optional passthrough to the inner MUI Container. Markets uses it for a wider maxWidth that its
+  // top panel shares for stat/table column alignment; every other page omits it (default Container).
+  containerProps?: ContainerProps;
 }
 
-export const ContentContainer = ({ children }: ContentContainerProps) => {
+export const ContentContainer = ({ children, containerProps }: ContentContainerProps) => {
   return (
     <Box
       sx={{
@@ -15,7 +18,7 @@ export const ContentContainer = ({ children }: ContentContainerProps) => {
         pt: '2.5rem',
       }}
     >
-      <Container>{children}</Container>
+      <Container {...containerProps}>{children}</Container>
     </Box>
   );
 };

src/components/lists/ListWrapper.tsx

@@ -3,7 +3,6 @@ import { Box, BoxProps, Paper, PaperProps, Typography } from '@mui/material';
 import { ReactNode, useState } from 'react';
 import { useRootStore } from 'src/store/root';
 import { DASHBOARD } from 'src/utils/events';
-import { figSurfaceShadow } from 'src/utils/figmaColors';
 
 import { toggleLocalStorageClick } from '../../helpers/toggle-local-storage-click';
 
@@ -95,13 +94,9 @@ export const ListWrapper = ({
 
   return (
     <Paper
+      variant="card"
       sx={[
-        {
-          mt: withTopMargin ? 4 : 0,
-          borderRadius: '10px',
-          backgroundColor: 'surface-elevated',
-          boxShadow: figSurfaceShadow('shadow-stroke-1'),
-        },
+        { mt: withTopMargin ? 4 : 0 },
         ...(paperSx ? (Array.isArray(paperSx) ? paperSx : [paperSx]) : []),
       ]}
     >

src/modules/dashboard/lists/ListButtonsColumn.tsx

@@ -19,6 +19,10 @@ export const ListButtonsColumn = ({ children, isColumnHeader = false }: ListButt
         flex: isColumnHeader ? 1 : 1,
         '.MuiButton-root': {
           ml: '6px',
+          // Restore a min-width floor for the row action buttons (the theme no longer floors
+          // button min-width globally) so they keep their prior size instead of shrinking to bare
+          // label width.
+          minWidth: 64,
         },
       }}
     >

src/modules/dev/ComponentShowcase/components/SurfacesSection/index.tsx

@@ -10,7 +10,7 @@ import { StakeActionBox } from 'src/modules/staking/StakeActionBox';
 import { Section } from '../Section';
 import { Specimen } from '../Specimen';
 
-const PAPER_VARIANTS = ['elevation', 'outlined', 'modal'] as const;
+const PAPER_VARIANTS = ['elevation', 'outlined', 'modal', 'card'] as const;
 
 export const SurfacesSection = () => (
   <Section title="Surfaces & cards">

src/modules/markets/MarketAssetsListContainer.tsx

@@ -134,7 +134,6 @@ export const MarketAssetsListContainer = () => {
 
   return (
     <ListWrapper
-      wrapperSx={{ pt: { xs: '6px', xsm: '6px', sm: 3.5 } }}
       titleComponent={
         sm ? (
           <Box

src/modules/migration/MigrationList.tsx

@@ -86,7 +86,7 @@ export const MigrationList = ({
   return (
     <Box sx={{ width: '100%' }}>
       <ListWrapper
-        paperSx={{ border: 0, boxShadow: 'none' }}
+        paperSx={{ boxShadow: 'none' }}
         titleComponent={
           <Box display="block">
             <Typography component="div" variant="subheader2" sx={{ mr: 4 }}>

src/modules/migration/MigrationLists.tsx

@@ -57,6 +57,7 @@ export const MigrationLists = ({
 
   return (
     <Paper
+      variant="card"
       sx={{
         display: 'flex',
         flexDirection: 'column',