update sales page

src/shared/components/patterns/MetricCard.tsx

@@ -58,7 +58,7 @@ export function MetricCard({
             </Text>
           </HStack>
 
-          <HStack gap={2} vAlign="center" hAlign="between">
+          <HStack gap={2} vAlign="center" hAlign="between" className="min-w-0 flex-wrap gap-y-1">
             {/*
               Text, NOT Heading. A KPI value is data, not a section title —
               marking it up as an h2 puts "32.7k" into the document outline
@@ -66,11 +66,13 @@ export function MetricCard({
               numbers. `display-3` gives the visual weight without the
               semantics.
             */}
-            <Text type="display-3">
+            <Text type="display-3" className="truncate shrink min-w-0">
               <AnimatedNumber value={value} format={format} />
             </Text>
             {deltaPct !== undefined ? (
-              <MetricDelta value={deltaPct} isRiseGood={isRiseGood} />
+              <div className="shrink-0">
+                <MetricDelta value={deltaPct} isRiseGood={isRiseGood} />
+              </div>
             ) : null}
           </HStack>
 

src/shared/layouts/workspace/nav-config.ts

@@ -14,6 +14,7 @@ export interface NavEntry {
  */
 export const PRIMARY_NAV: NavEntry[] = [
   {label: 'Dashboard', href: '/dashboard', icon: ICONS.dashboard},
+  {label: 'Commerce', href: '/commerce', icon: ICONS.commerce},
   {label: 'Store', href: '/stores', icon: ICONS.stores},
   {label: 'Lyts', href: '/lyts', icon: ICONS.lyts},
   {label: 'Leaderboard', href: '/staff', icon: ICONS.staff},

src/shared/utils/icons.ts

@@ -78,6 +78,7 @@ export const ICONS = {
   minimize: Minimize2,
   // Navigation
   dashboard: LayoutDashboard,
+  commerce: ShoppingCart,
   stores: Store,
   lyts: Gift,
   staff: Users,