Skip to content

Commit 1b6c089

Browse files
forestreamforestream
committed
Fix responsive design
1 parent 306af15 commit 1b6c089

File tree

3 files changed

+29
-28
lines changed

3 files changed

+29
-28
lines changed

‎apps/landing/src/app/(detail)/components/overview/page.tsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Center, Flex, Grid, Text, VStack } from '@devup-ui/react'
1+
import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'
22

33
import * as Icons from '@/components/icons/components'
44

@@ -33,11 +33,10 @@ export default function Page() {
3333
'repeat(4, 1fr)',
3434
'repeat(5, 1fr)',
3535
]}
36-
overflow="visible"
3736
>
3837
<Card>
3938
<Center h="140px">
40-
<Icons.IconButtonComponent />
39+
<Icons.IconButtonComponent className={css({ w: '100%' })} />
4140
</Center>
4241
<Flex
4342
alignItems="center"
@@ -53,7 +52,7 @@ export default function Page() {
5352
</Card>
5453
<Card>
5554
<Center h="140px">
56-
<Icons.IconTextBoxComp />
55+
<Icons.IconTextBoxComp className={css({ w: '100%' })} />
5756
</Center>
5857
<Flex
5958
alignItems="center"
@@ -69,7 +68,7 @@ export default function Page() {
6968
</Card>
7069
<Card>
7170
<Center h="140px">
72-
<Icons.IconTextAreaComp />
71+
<Icons.IconTextAreaComp className={css({ w: '100%' })} />
7372
</Center>
7473
<Flex
7574
alignItems="center"
@@ -85,7 +84,7 @@ export default function Page() {
8584
</Card>
8685
<Card>
8786
<Center h="140px">
88-
<Icons.IconDropdownComp />
87+
<Icons.IconDropdownComp className={css({ w: '100%' })} />
8988
</Center>
9089
<Flex
9190
alignItems="center"
@@ -101,7 +100,7 @@ export default function Page() {
101100
</Card>
102101
<Card>
103102
<Center h="140px">
104-
<Icons.IconRadioComp />
103+
<Icons.IconRadioComp className={css({ w: '100%' })} />
105104
</Center>
106105
<Flex
107106
alignItems="center"
@@ -117,7 +116,7 @@ export default function Page() {
117116
</Card>
118117
<Card>
119118
<Center h="140px">
120-
<Icons.IconCheckboxComp />
119+
<Icons.IconCheckboxComp className={css({ w: '100%' })} />
121120
</Center>
122121
<Flex
123122
alignItems="center"
@@ -133,7 +132,7 @@ export default function Page() {
133132
</Card>
134133
<Card>
135134
<Center h="140px">
136-
<Icons.IconStepperComp />
135+
<Icons.IconStepperComp className={css({ w: '100%' })} />
137136
</Center>
138137
<Flex
139138
alignItems="center"
@@ -149,7 +148,7 @@ export default function Page() {
149148
</Card>
150149
<Card>
151150
<Center h="140px">
152-
<Icons.IconToggleComp />
151+
<Icons.IconToggleComp className={css({ w: '100%' })} />
153152
</Center>
154153
<Flex
155154
alignItems="center"
@@ -165,7 +164,7 @@ export default function Page() {
165164
</Card>
166165
<Card>
167166
<Center h="140px">
168-
<Icons.IconSliderComp />
167+
<Icons.IconSliderComp className={css({ w: '100%' })} />
169168
</Center>
170169
<Flex
171170
alignItems="center"
@@ -181,7 +180,7 @@ export default function Page() {
181180
</Card>
182181
<Card>
183182
<Center h="140px">
184-
<Icons.IconDatePickerComp />
183+
<Icons.IconDatePickerComp className={css({ w: '100%' })} />
185184
</Center>
186185
<Flex
187186
alignItems="center"
@@ -197,7 +196,7 @@ export default function Page() {
197196
</Card>
198197
<Card>
199198
<Center h="140px">
200-
<Icons.IconColorPickerComp />
199+
<Icons.IconColorPickerComp className={css({ w: '100%' })} />
201200
</Center>
202201
<Flex
203202
alignItems="center"
@@ -213,7 +212,7 @@ export default function Page() {
213212
</Card>
214213
<Card>
215214
<Center h="140px">
216-
<Icons.IconUploaderComp />
215+
<Icons.IconUploaderComp className={css({ w: '100%' })} />
217216
</Center>
218217
<Flex
219218
alignItems="center"
@@ -229,7 +228,7 @@ export default function Page() {
229228
</Card>
230229
<Card>
231230
<Center h="140px">
232-
<Icons.IconPagination />
231+
<Icons.IconPagination className={css({ w: '100%' })} />
233232
</Center>
234233
<Flex
235234
alignItems="center"
@@ -245,7 +244,7 @@ export default function Page() {
245244
</Card>
246245
<Card>
247246
<Center h="140px">
248-
<Icons.IconProgressBar />
247+
<Icons.IconProgressBar className={css({ w: '100%' })} />
249248
</Center>
250249
<Flex
251250
alignItems="center"
@@ -261,7 +260,7 @@ export default function Page() {
261260
</Card>
262261
<Card>
263262
<Center h="140px">
264-
<Icons.IconSearchComp />
263+
<Icons.IconSearchComp className={css({ w: '100%' })} />
265264
</Center>
266265
<Flex
267266
alignItems="center"
@@ -277,7 +276,7 @@ export default function Page() {
277276
</Card>
278277
<Card>
279278
<Center h="140px">
280-
<Icons.IconSelectComp />
279+
<Icons.IconSelectComp className={css({ w: '100%' })} />
281280
</Center>
282281
<Flex
283282
alignItems="center"
@@ -293,7 +292,7 @@ export default function Page() {
293292
</Card>
294293
<Card>
295294
<Center h="140px">
296-
<Icons.IconLabelComp />
295+
<Icons.IconLabelComp className={css({ w: '100%' })} />
297296
</Center>
298297
<Flex
299298
alignItems="center"
@@ -326,7 +325,7 @@ export default function Page() {
326325
>
327326
<Card>
328327
<Center h="140px">
329-
<Icons.IconFooterComp />
328+
<Icons.IconFooterComp className={css({ w: '100%' })} />
330329
</Center>
331330
<Flex
332331
alignItems="center"
@@ -342,7 +341,7 @@ export default function Page() {
342341
</Card>
343342
<Card>
344343
<Center h="140px">
345-
<Icons.IconTooltipComp />
344+
<Icons.IconTooltipComp className={css({ w: '100%' })} />
346345
</Center>
347346
<Flex
348347
alignItems="center"
@@ -358,7 +357,7 @@ export default function Page() {
358357
</Card>
359358
<Card>
360359
<Center h="140px">
361-
<Icons.IconTabComp />
360+
<Icons.IconTabComp className={css({ w: '100%' })} />
362361
</Center>
363362
<Flex
364363
alignItems="center"
@@ -374,7 +373,7 @@ export default function Page() {
374373
</Card>
375374
<Card>
376375
<Center h="140px">
377-
<Icons.IconMenuComp />
376+
<Icons.IconMenuComp className={css({ w: '100%' })} />
378377
</Center>
379378
<Flex
380379
alignItems="center"
@@ -390,7 +389,7 @@ export default function Page() {
390389
</Card>
391390
<Card>
392391
<Center h="140px">
393-
<Icons.IconHeaderComp />
392+
<Icons.IconHeaderComp className={css({ w: '100%' })} />
394393
</Center>
395394
<Flex
396395
alignItems="center"
@@ -406,7 +405,7 @@ export default function Page() {
406405
</Card>
407406
<Card>
408407
<Center h="140px">
409-
<Icons.IconConfirmComp />
408+
<Icons.IconConfirmComp className={css({ w: '100%' })} />
410409
</Center>
411410
<Flex
412411
alignItems="center"
@@ -422,7 +421,7 @@ export default function Page() {
422421
</Card>
423422
<Card>
424423
<Center h="140px">
425-
<Icons.IconSnackbarComp />
424+
<Icons.IconSnackbarComp className={css({ w: '100%' })} />
426425
</Center>
427426
<Flex
428427
alignItems="center"
@@ -438,7 +437,7 @@ export default function Page() {
438437
</Card>
439438
<Card>
440439
<Center h="140px">
441-
<Icons.IconBottomSheetComp />
440+
<Icons.IconBottomSheetComp className={css({ w: '100%' })} />
442441
</Center>
443442
<Flex
444443
alignItems="center"
@@ -471,7 +470,7 @@ export default function Page() {
471470
>
472471
<Card>
473472
<Center h="140px">
474-
<Icons.IconThemeButtonComp />
473+
<Icons.IconThemeButtonComp className={css({ w: '100%' })} />
475474
</Center>
476475
<Flex
477476
alignItems="center"

‎apps/landing/src/components/icons/components/IconCheckboxComp.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function IconCheckboxComp({
1010
const theme = useTheme()
1111
return (
1212
<svg
13+
className={className}
1314
fill="none"
1415
height="140"
1516
viewBox="0 0 259 140"

‎apps/landing/src/components/icons/components/IconSelectComp.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function IconSelectComp({
1010
const theme = useTheme()
1111
return (
1212
<svg
13+
className={className}
1314
fill="none"
1415
height="140"
1516
viewBox="0 0 259 140"

0 commit comments

Comments
 (0)