From ba0c3ffd982f02e1c6bc122c8622dec6a425b217 Mon Sep 17 00:00:00 2001
From: Masha <masha@MacBook-Air-de-Masha.local>
Date: Mon, 3 Aug 2026 22:58:42 +0200
Subject: [PATCH 1/6] fix(fox): polish ecosystem icons and header layout

---
 src/components/Layout/Header/Header.tsx    | 5 ++---
 src/pages/Fox/components/FoxFarming.tsx    | 7 ++++---
 src/pages/Fox/components/FoxGovernance.tsx | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index eca9a356be2..c459b4de267 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -86,13 +86,12 @@ export const Header = memo(() => {
 
   const searchBoxDisplay = {
     base: 'none',
-    '2xl': 'flex',
-    xl: 'none',
+    '3xl': 'flex',
   }
 
   const iconButtonDisplay = {
     base: 'flex',
-    '2xl': 'none',
+    '3xl': 'none',
   }
 
   useEffect(() => {
diff --git a/src/pages/Fox/components/FoxFarming.tsx b/src/pages/Fox/components/FoxFarming.tsx
index 85e70e7ff24..63f7ba9c9a8 100644
--- a/src/pages/Fox/components/FoxFarming.tsx
+++ b/src/pages/Fox/components/FoxFarming.tsx
@@ -7,6 +7,7 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   SimpleGrid,
   Skeleton,
   Stack,
@@ -20,6 +21,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import qs from 'qs'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbPlant2 } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 import { useLocation, useNavigate } from 'react-router-dom'
 
@@ -70,6 +72,7 @@ const columnsProps = {
   base: 1,
   md: 2,
 }
+const farmingIcon = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxFarming = () => {
   const { assetAccountId } = useFoxPageContext()
@@ -302,9 +305,7 @@ export const FoxFarming = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🧑‍🌾
-              </CText>
+              {farmingIcon}
               {translate('foxPage.foxFarming.title')}
               <Skeleton isLoaded={Boolean(!isOpportunityLoading && apy)} ml={2}>
                 <Tag colorScheme='green' verticalAlign='middle'>
diff --git a/src/pages/Fox/components/FoxGovernance.tsx b/src/pages/Fox/components/FoxGovernance.tsx
index a30fc3c8824..0410df88bc2 100644
--- a/src/pages/Fox/components/FoxGovernance.tsx
+++ b/src/pages/Fox/components/FoxGovernance.tsx
@@ -6,6 +6,7 @@ import {
   Divider,
   Flex,
   Heading,
+  Icon,
   Link,
   Skeleton,
   Tab,
@@ -13,10 +14,10 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-  Text as CText,
 } from '@chakra-ui/react'
 import { foxAssetId } from '@shapeshiftoss/caip'
 import { useCallback, useEffect, useMemo } from 'react'
+import { TbBuildingBank } from 'react-icons/tb'
 import { useTranslate } from 'react-polyglot'
 
 import { FoxGovernanceProposal } from './FoxGovernanceProposal'
@@ -52,6 +53,7 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
+const governanceIcon = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -119,9 +121,7 @@ export const FoxGovernance = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              <CText as='span' me={2}>
-                🏛️
-              </CText>
+              {governanceIcon}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>

From ba88733eeb8fddb7d593881f3db7eafa84259441 Mon Sep 17 00:00:00 2001
From: Masha <masha@MacBook-Air-de-Masha.local>
Date: Mon, 3 Aug 2026 23:36:27 +0200
Subject: [PATCH 2/6] fix(fox): address review feedback

---
 src/components/Layout/Header/Header.tsx    | 12 ++----------
 src/pages/Fox/components/FoxFarming.tsx    |  4 ++--
 src/pages/Fox/components/FoxGovernance.tsx |  4 ++--
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index c459b4de267..c8244d42bd9 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -55,6 +55,8 @@ const rightHStackSpacingSx = { base: 2, lg: 4 }
 // Search box responsive styles
 const searchBoxMaxWSx = { base: 'auto', lg: '400px' }
 const searchBoxMinWSx = { base: 'auto', xl: '300px' }
+const searchBoxDisplay = { base: 'none', '3xl': 'flex' }
+const iconButtonDisplay = { base: 'flex', '3xl': 'none' }
 
 const baseTradeSubMenuItems = [
   { label: 'navBar.swap', path: '/trade', icon: TbRefresh },
@@ -84,16 +86,6 @@ export const Header = memo(() => {
   const height = useMemo(() => ref.current?.getBoundingClientRect()?.height ?? 0, [])
   const { scrollY } = useScroll()
 
-  const searchBoxDisplay = {
-    base: 'none',
-    '3xl': 'flex',
-  }
-
-  const iconButtonDisplay = {
-    base: 'flex',
-    '3xl': 'none',
-  }
-
   useEffect(() => {
     return scrollY.on('change', () => setY(scrollY.get()))
   }, [scrollY])
diff --git a/src/pages/Fox/components/FoxFarming.tsx b/src/pages/Fox/components/FoxFarming.tsx
index 63f7ba9c9a8..9d6a242af9c 100644
--- a/src/pages/Fox/components/FoxFarming.tsx
+++ b/src/pages/Fox/components/FoxFarming.tsx
@@ -72,7 +72,7 @@ const columnsProps = {
   base: 1,
   md: 2,
 }
-const farmingIcon = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
+const FARMING_ICON = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxFarming = () => {
   const { assetAccountId } = useFoxPageContext()
@@ -305,7 +305,7 @@ export const FoxFarming = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              {farmingIcon}
+              {FARMING_ICON}
               {translate('foxPage.foxFarming.title')}
               <Skeleton isLoaded={Boolean(!isOpportunityLoading && apy)} ml={2}>
                 <Tag colorScheme='green' verticalAlign='middle'>
diff --git a/src/pages/Fox/components/FoxGovernance.tsx b/src/pages/Fox/components/FoxGovernance.tsx
index 0410df88bc2..81a45c898e3 100644
--- a/src/pages/Fox/components/FoxGovernance.tsx
+++ b/src/pages/Fox/components/FoxGovernance.tsx
@@ -53,7 +53,7 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
-const governanceIcon = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
+const GOVERNANCE_ICON = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -121,7 +121,7 @@ export const FoxGovernance = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              {governanceIcon}
+              {GOVERNANCE_ICON}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>

From f34b41386f0d6d59de5758dc33188c2d7512a984 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Wed, 5 Aug 2026 10:48:09 -0600
Subject: [PATCH 3/6] fix(fox): camelCase icon constants, optically center
 governance icon

TbBuildingBank's glyph sits low in its viewBox (y=6-21 of 24), so the
box-centered icon rendered ~2px below the heading text center; nudge it
up to compensate. TbPlant2 is already centered and needs no offset.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/pages/Fox/components/FoxFarming.tsx    |  4 ++--
 src/pages/Fox/components/FoxGovernance.tsx | 13 +++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/Fox/components/FoxFarming.tsx b/src/pages/Fox/components/FoxFarming.tsx
index 9d6a242af9c..63f7ba9c9a8 100644
--- a/src/pages/Fox/components/FoxFarming.tsx
+++ b/src/pages/Fox/components/FoxFarming.tsx
@@ -72,7 +72,7 @@ const columnsProps = {
   base: 1,
   md: 2,
 }
-const FARMING_ICON = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
+const farmingIcon = <Icon as={TbPlant2} aria-hidden color='blue.500' boxSize={8} me={2} />
 
 export const FoxFarming = () => {
   const { assetAccountId } = useFoxPageContext()
@@ -305,7 +305,7 @@ export const FoxFarming = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              {FARMING_ICON}
+              {farmingIcon}
               {translate('foxPage.foxFarming.title')}
               <Skeleton isLoaded={Boolean(!isOpportunityLoading && apy)} ml={2}>
                 <Tag colorScheme='green' verticalAlign='middle'>
diff --git a/src/pages/Fox/components/FoxGovernance.tsx b/src/pages/Fox/components/FoxGovernance.tsx
index 81a45c898e3..fdfa4ad2610 100644
--- a/src/pages/Fox/components/FoxGovernance.tsx
+++ b/src/pages/Fox/components/FoxGovernance.tsx
@@ -53,7 +53,16 @@ const flexPropsMdAuto = { base: 1, md: 'auto' }
 const widthBaseFull = { base: 'full' }
 const widthMdAuto = { base: 'full', md: 'auto' }
 const tabListPaddingLeft = { base: 6, md: 0 }
-const GOVERNANCE_ICON = <Icon as={TbBuildingBank} aria-hidden color='blue.500' boxSize={8} me={2} />
+const governanceIcon = (
+  <Icon
+    as={TbBuildingBank}
+    aria-hidden
+    color='blue.500'
+    boxSize={8}
+    me={2}
+    transform='translateY(-2px)'
+  />
+)
 
 export const FoxGovernance = () => {
   const isConnected = useIsWalletConnected()
@@ -121,7 +130,7 @@ export const FoxGovernance = () => {
         <Flex sx={headerSx}>
           <Box mb={headerTitleMb} maxWidth={headerTitleMaxWidth}>
             <Heading as='h2' fontSize='2xl' display='flex' alignItems='center'>
-              {GOVERNANCE_ICON}
+              {governanceIcon}
               {translate('foxPage.governance.title')}
             </Heading>
             <Flex alignItems='center'>

From 2707e3bee2ed70f0f4f1a82103067061037c7b3f Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Wed, 5 Aug 2026 10:48:43 -0600
Subject: [PATCH 4/6] fix: show full search bar from 1540px, static width

Hiding the bar until 3xl (2200px) removed it for all 1080p displays.
The bar genuinely fits once each flex=1 side section clears its content
width (~1540px); no theme breakpoint sits near that point, so gate the
full/icon variants on a raw media query and give the bar a static 300px
width instead of min/max clamps whose responsive keys were inert.

Also remove the unreachable sub-lg fallback inside GlobalSearchButton:
the full-bar variant has never rendered below 1440px, so its internal
below-992px icon switch was dead code.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../Header/GlobalSearch/GlobalSearchButton.tsx     | 14 ++------------
 src/components/Layout/Header/Header.tsx            | 11 +++++------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx b/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
index 37e905c944e..43f71d49330 100644
--- a/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
+++ b/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
@@ -11,9 +11,6 @@ interface GlobalSearchButtonProps {
   isIconButton?: boolean
 }
 
-const widthProp = { base: 'auto', lg: 'full' }
-const displayProp1 = { base: 'flex', lg: 'none' }
-const displayProp2 = { base: 'none', lg: 'flex' }
 const sxProp1 = { svg: { width: '18px', height: '18px' } }
 
 const searchIcon = <SearchIcon />
@@ -50,14 +47,7 @@ export const GlobalSearchButton = memo(({ isIconButton = false }: GlobalSearchBu
           data-testid='global-search-button'
         />
       ) : (
-        <Box width={widthProp}>
-          <IconButton
-            display={displayProp1}
-            icon={searchIcon}
-            aria-label={translate('common.search')}
-            onClick={onOpen}
-            data-testid='global-search-button'
-          />
+        <Box width='full'>
           <Button
             width='full'
             leftIcon={searchIcon}
@@ -66,7 +56,7 @@ export const GlobalSearchButton = memo(({ isIconButton = false }: GlobalSearchBu
             fontSize='sm'
             alignItems='center'
             color='text.subtle'
-            display={displayProp2}
+            display='flex'
             sx={sxProp1}
             bg='background.input.base'
             border='1px solid'
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index c8244d42bd9..e95cf5835fe 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -53,10 +53,9 @@ const navHStackDisplaySx = { base: 'none', md: 'flex' }
 const rightHStackSpacingSx = { base: 2, lg: 4 }
 
 // Search box responsive styles
-const searchBoxMaxWSx = { base: 'auto', lg: '400px' }
-const searchBoxMinWSx = { base: 'auto', xl: '300px' }
-const searchBoxDisplay = { base: 'none', '3xl': 'flex' }
-const iconButtonDisplay = { base: 'flex', '3xl': 'none' }
+const fullSearchMediaQuery = '@media screen and (min-width: 1540px)'
+const searchBoxSx = { display: 'none', [fullSearchMediaQuery]: { display: 'flex' } }
+const iconButtonSx = { display: 'flex', [fullSearchMediaQuery]: { display: 'none' } }
 
 const baseTradeSubMenuItems = [
   { label: 'navBar.swap', path: '/trade', icon: TbRefresh },
@@ -200,13 +199,13 @@ export const Header = memo(() => {
           </HStack>
 
           {/* Middle section - search box */}
-          <Box maxW={searchBoxMaxWSx} minW={searchBoxMinWSx} mx={4} display={searchBoxDisplay}>
+          <Box width='300px' mx={4} sx={searchBoxSx}>
             <GlobalSearchButton />
           </Box>
 
           {/* Right section - equal width to left */}
           <HStack spacing={rightHStackSpacingSx} flex='1' justifyContent='flex-end' minW={0}>
-            <Box display={iconButtonDisplay}>
+            <Box sx={iconButtonSx}>
               <GlobalSearchButton isIconButton />
             </Box>
             {isLargerThanMd && (isDegradedState || degradedChainIds.length > 0) && (

From 4c589ea4b643dbe226083e21bee2baeb23d160b5 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Wed, 5 Aug 2026 10:48:51 -0600
Subject: [PATCH 5/6] fix: mask scroll gap around sticky header

The sticky header floats 8px below the viewport top with side gutters,
so scrolling content was visible through the surrounding gap. Add an
always-opaque backdrop pseudo-element (body background color, so it is
invisible at rest) extending past the header on top and sides, with a
full-width bottom hairline that activates instantly on scroll. The
pill's own conditional background, border, radius and transitions are
superseded by the mask and removed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/Layout/Header/Header.tsx | 28 ++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index e95cf5835fe..6f52bdd78dd 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -89,6 +89,26 @@ export const Header = memo(() => {
     return scrollY.on('change', () => setY(scrollY.get()))
   }, [scrollY])
 
+  const isScrolled = y > height
+
+  // masks the area behind and around the header so scrolling content can't show through it - kept
+  // permanently opaque (it matches the body background) so it never lags behind fast scrolls
+  const backdropSx = useMemo(
+    () => ({
+      content: '""',
+      position: 'absolute' as const,
+      top: '-1rem',
+      left: '-1rem',
+      right: '-1rem',
+      bottom: 0,
+      bg: 'background.surface.base',
+      borderBottom: '1px solid',
+      borderBottomColor: isScrolled ? 'border.base' : 'transparent',
+      zIndex: -1,
+    }),
+    [isScrolled],
+  )
+
   const isWalletConnectToDappsV2Enabled = useFeatureFlag('WalletConnectToDappsV2')
   const isActionCenterEnabled = useFeatureFlag('ActionCenter')
   const isNewWalletManagerEnabled = useFeatureFlag('NewWalletManager')
@@ -154,15 +174,9 @@ export const Header = memo(() => {
         position='sticky'
         zIndex='banner'
         ref={ref}
-        bg={y > height ? 'background.surface.base' : 'transparent'}
-        border='1px solid'
-        borderColor={y > height ? 'border.base' : 'transparent'}
-        borderRadius='2xl'
+        _before={backdropSx}
         marginTop={2}
         mx={2}
-        transitionDuration='200ms'
-        transitionProperty='all'
-        transitionTimingFunction='cubic-bezier(0.4, 0, 0.2, 1)'
         top={2}
         paddingTop={paddingTopProp}
       >

From 9d6502bc5cdcd5f50e52a7811a814305fa91fb46 Mon Sep 17 00:00:00 2001
From: kaladinlight <35275952+kaladinlight@users.noreply.github.com>
Date: Wed, 5 Aug 2026 11:04:55 -0600
Subject: [PATCH 6/6] fix: drop broken header height measurement from scroll
 threshold

The height was memoized from a null ref during the initial render, so it
was always 0 and the threshold was already effectively any-scroll. Make
that explicit and remove the dead ref plumbing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/Layout/Header/Header.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index 6f52bdd78dd..6f3d9de2dbc 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -1,6 +1,6 @@
 import { Box, Divider, Flex, HStack, Link, Text, useMediaQuery } from '@chakra-ui/react'
 import { useScroll } from 'framer-motion'
-import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   TbArrowRight,
   TbBuildingBank,
@@ -80,16 +80,14 @@ export const Header = memo(() => {
   const {
     state: { isConnected, walletInfo },
   } = useWallet()
-  const ref = useRef<HTMLDivElement>(null)
   const [y, setY] = useState(0)
-  const height = useMemo(() => ref.current?.getBoundingClientRect()?.height ?? 0, [])
   const { scrollY } = useScroll()
 
   useEffect(() => {
     return scrollY.on('change', () => setY(scrollY.get()))
   }, [scrollY])
 
-  const isScrolled = y > height
+  const isScrolled = y > 0
 
   // masks the area behind and around the header so scrolling content can't show through it - kept
   // permanently opaque (it matches the body background) so it never lags behind fast scrolls
@@ -173,7 +171,6 @@ export const Header = memo(() => {
         direction='column'
         position='sticky'
         zIndex='banner'
-        ref={ref}
         _before={backdropSx}
         marginTop={2}
         mx={2}