Skip to content

Commit f586eab

Browse files
0xTxbi0xTxbi
committed
cleaner rwd
1 parent 8a8a8b7 commit f586eab

File tree

7 files changed

+65
-20
lines changed

7 files changed

+65
-20
lines changed

‎packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Dispatch, FC } from 'react'
1+
import type { FC } from 'react'
22
import OnrampWidgetRenderer from './OnrampWidgetRenderer.js'
33
import { Box, Button, Flex, Text } from '../../../primitives/index.js'
44
import AmountInput from '../../../common/AmountInput.js'
@@ -200,7 +200,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
200200
return (
201201
<div
202202
className="relay-kit-reset"
203-
style={{ maxWidth: 408, minWidth: 308, width: '100%' }}
203+
style={{ maxWidth: 408, minWidth: 320, width: '100%' }}
204204
>
205205
<Flex
206206
direction="column"

‎packages/ui/src/components/widgets/SwapWidget/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,7 +752,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
752752
width: '100%',
753753
overflow: 'hidden',
754754
border: 'widget-border',
755-
minWidth: 300,
755+
minWidth: 320,
756756
maxWidth: 408
757757
}}
758758
>

‎packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -277,9 +277,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
277277
<SectionContainer
278278
css={{
279279
border: { base: 'none', md: '1px solid' },
280-
borderColor: { base: 'transparent', md: 'slate.4' },
281-
minWidth: { base: '350px', md: '400px' },
282-
maxWidth: '400px'
280+
borderColor: { base: 'transparent', md: 'slate.4' }
283281
}}
284282
id={'buy-token-section'}
285283
isPaymentMethodOpen={isPaymentMethodOpen}

‎packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx‎

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,21 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
3838
minHeight: 42
3939
}}
4040
>
41-
<Flex align="center" css={{ gap: '1' }}>
41+
<Flex align="center" css={{ gap: '1', minWidth: 0 }}>
4242
{isLoading ? (
4343
<Skeleton css={{ width: 90, height: 20 }} />
4444
) : amountUsd && Number(amountUsd) > 0 ? (
4545
<>
46-
<Text style="h6" css={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
46+
<Text
47+
style="h6"
48+
css={{
49+
textAlign: 'right',
50+
overflow: 'hidden',
51+
textOverflow: 'ellipsis',
52+
whiteSpace: 'nowrap',
53+
minWidth: 0
54+
}}
55+
>
4756
{formatDollarCompact(Number(amountUsd))} total
4857
</Text>
4958
<FeeBreakdownTooltip
@@ -72,14 +81,26 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
7281
style="h6"
7382
css={{
7483
textAlign: 'right',
84+
overflow: 'hidden',
85+
textOverflow: 'ellipsis',
7586
whiteSpace: 'nowrap',
76-
lineHeight: 'normal'
87+
lineHeight: 'normal',
88+
minWidth: 0
7789
}}
7890
>
7991
$0 total
8092
</Text>
8193
) : (
82-
<Text style="h6" css={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
94+
<Text
95+
style="h6"
96+
css={{
97+
textAlign: 'right',
98+
overflow: 'hidden',
99+
textOverflow: 'ellipsis',
100+
whiteSpace: 'nowrap',
101+
minWidth: 0
102+
}}
103+
>
83104
- total
84105
</Text>
85106
)}
@@ -88,16 +109,46 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
88109
<Skeleton css={{ width: 70, height: 14 }} />
89110
) : amountUsd && Number(amountUsd) > 0 ? (
90111
token && tokenAmountFormatted && Number(tokenAmountFormatted) > 0 ? (
91-
<Text style="subtitle3" color="subtleSecondary">
112+
<Text
113+
style="subtitle3"
114+
color="subtleSecondary"
115+
css={{
116+
overflow: 'hidden',
117+
textOverflow: 'ellipsis',
118+
whiteSpace: 'nowrap',
119+
minWidth: 0,
120+
maxWidth: '100%'
121+
}}
122+
>
92123
{formatNumber(tokenAmountFormatted, 4, true)} {token.symbol}
93124
</Text>
94125
) : token && fallbackTokenAmount && Number(fallbackTokenAmount) > 0 ? (
95-
<Text style="subtitle3" color="subtleSecondary">
126+
<Text
127+
style="subtitle3"
128+
color="subtleSecondary"
129+
css={{
130+
overflow: 'hidden',
131+
textOverflow: 'ellipsis',
132+
whiteSpace: 'nowrap',
133+
minWidth: 0,
134+
maxWidth: '100%'
135+
}}
136+
>
96137
{formatNumber(fallbackTokenAmount, 4, true)} {token.symbol}
97138
</Text>
98139
) : null
99140
) : token ? (
100-
<Text style="subtitle3" color="subtleSecondary">
141+
<Text
142+
style="subtitle3"
143+
color="subtleSecondary"
144+
css={{
145+
overflow: 'hidden',
146+
textOverflow: 'ellipsis',
147+
whiteSpace: 'nowrap',
148+
minWidth: 0,
149+
maxWidth: '100%'
150+
}}
151+
>
101152
0.00 {token.symbol}
102153
</Text>
103154
) : null}

‎packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,13 @@ const SectionContainer: FC<SectionContainerProps> = ({
2323
id={id}
2424
css={{
2525
width: '100%',
26-
minWidth: '400px',
27-
maxWidth: '400px',
2826
display: 'flex',
2927
flexDirection: 'column',
3028
alignItems: 'start',
3129
backgroundColor: { base: 'transparent', md: 'widget-card-background' },
3230
border: 'widget-card-border',
3331
gap: '4',
34-
paddingY: '16px',
32+
paddingY: { base: '12px', md: '16px' },
3533
paddingX: { base: '0', md: '16px' },
3634
borderRadius: { base: '0', md: 'widget-card-border-radius' },
3735
minHeight: {

‎packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -339,9 +339,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
339339
<SectionContainer
340340
css={{
341341
border: { base: 'none', md: '1px solid' },
342-
borderColor: { base: 'transparent', md: 'slate.4' },
343-
minWidth: { base: '350px', md: '400px' },
344-
maxWidth: '400px'
342+
borderColor: { base: 'transparent', md: 'slate.4' }
345343
}}
346344
id={'sell-token-section'}
347345
isPaymentMethodOpen={isPaymentMethodOpen}

‎packages/ui/src/components/widgets/TokenWidget/widget/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1196,7 +1196,7 @@ const TokenWidget: FC<TokenWidgetProps> = ({
11961196
width: '100%',
11971197
overflow: 'hidden',
11981198
border: 'widget-border',
1199-
minWidth: 300,
1199+
minWidth: { base: 320, md: 400 },
12001200
maxWidth: 408
12011201
}}
12021202
>

0 commit comments

Comments
 (0)