From be98a25c3c4d253f8280a3a0996dc0aaf71989ad Mon Sep 17 00:00:00 2001
From: wmagev <74554762+wmagev@users.noreply.github.com>
Date: Sat, 18 Apr 2026 22:52:00 +0900
Subject: [PATCH 1/2] fix: raise selected ToggleButton with zIndex to prevent
 border overlap

The ToggleButtonGroup's sibling buttons overlap borders by 1px via
MUI's default `marginLeft: -1px`. When a button is selected its
primary-colored border was hidden by the neighbor's transparent-border
edge. Giving each button `position: relative` and the selected one
`zIndex: 1` lifts the colored border above the overlap.
---
 src/components/dashboard/MinerRatesTable.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/dashboard/MinerRatesTable.tsx b/src/components/dashboard/MinerRatesTable.tsx
index 33494c7..4b6407b 100644
--- a/src/components/dashboard/MinerRatesTable.tsx
+++ b/src/components/dashboard/MinerRatesTable.tsx
@@ -301,6 +301,7 @@ const MinerRatesTable: React.FC = () => {
             onChange={(_, v) => v && setDirection(v as DirectionFilter)}
             sx={{
               '& .MuiToggleButton-root': {
+                position: 'relative',
                 fontFamily: FONTS.mono,
                 fontSize: '0.65rem',
                 px: 1.25,
@@ -311,6 +312,7 @@ const MinerRatesTable: React.FC = () => {
                 color: theme.palette.text.secondary,
               },
               '& .Mui-selected': {
+                zIndex: 1,
                 backgroundColor: `${theme.palette.primary.main}22 !important`,
                 color: `${theme.palette.primary.main} !important`,
                 borderColor: `${theme.palette.primary.main} !important`,

From 97599915b8cffbf203f8d98716027f25c9f952f3 Mon Sep 17 00:00:00 2001
From: wmagev <74554762+wmagev@users.noreply.github.com>
Date: Sun, 19 Apr 2026 00:21:38 +0900
Subject: [PATCH 2/2] fix: stack Summary row vertically on mobile to prevent
 overflow

---
 src/pages/SwapDetailPage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/SwapDetailPage.tsx b/src/pages/SwapDetailPage.tsx
index 1c648d0..82862b7 100644
--- a/src/pages/SwapDetailPage.tsx
+++ b/src/pages/SwapDetailPage.tsx
@@ -158,7 +158,12 @@ const SwapDetailPage: React.FC = () => {
               {chainSymbol(swap.sourceChain)} &rarr;{' '}
               {chainSymbol(swap.destChain)}
             </Typography>
-            <Stack direction="row" spacing={3} flexWrap="wrap">
+            <Stack
+              direction={{ xs: 'column', sm: 'row' }}
+              spacing={{ xs: 0.5, sm: 3 }}
+              flexWrap="wrap"
+              useFlexGap
+            >
               {swap.sourceAmount && swap.sourceChain && (
                 <LabelValue
                   label="Source"