Skip to content

Commit 0c336a5

Browse files
abishekveabishekve
committed
styles: added responsivness
1 parent 29461df commit 0c336a5

File tree

3 files changed

+105
-87
lines changed

3 files changed

+105
-87
lines changed

‎thingconnect.pulse.client/src/components/OutageList.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@ function formatDuration(seconds?: number | null): string {
2121
export function OutagesList({ outages }: OutagesListProps) {
2222
if (outages.length === 0) {
2323
return (
24-
<VStack color='gray.300' textAlign='center' gap={1} py={5}>
24+
<VStack
25+
justify='center'
26+
align='center'
27+
color='gray.300'
28+
textAlign='center'
29+
gap={1}
30+
py={5}
31+
h='100%'
32+
>
2533
<CloudOff size={'40px'} />
2634
<Text textAlign='center' color='gray.500'>
2735
No recent outages

‎thingconnect.pulse.client/src/components/RecentChecksTable.tsx‎

Lines changed: 87 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,15 @@ export function RecentChecksTable({ checks, pageSize = 10 }: RecentChecksTablePr
2727

2828
if (checks.length === 0) {
2929
return (
30-
<VStack color='gray.300' textAlign='center' gap={1} py={5}>
30+
<VStack
31+
justify='center'
32+
align='center'
33+
color='gray.300'
34+
textAlign='center'
35+
gap={1}
36+
py={5}
37+
h='100%'
38+
>
3139
<CloudOff size={'40px'} />
3240
<Text textAlign='center' color='gray.500'>
3341
No recent checks available
@@ -37,85 +45,87 @@ export function RecentChecksTable({ checks, pageSize = 10 }: RecentChecksTablePr
3745
}
3846

3947
return (
40-
<VStack gap={2} align='stretch'>
41-
<Table.ScrollArea borderWidth='1px' rounded='md' flex={1} minH={0} overflow='auto'>
42-
<Table.Root size='sm' stickyHeader>
43-
<Table.Header>
44-
<Table.Row bg='gray.100' _dark={{ bg: 'gray.800' }}>
45-
<Table.ColumnHeader w='30%'>Time</Table.ColumnHeader>
46-
<Table.ColumnHeader w='20%'>Status</Table.ColumnHeader>
47-
<Table.ColumnHeader w='25%'>RTT</Table.ColumnHeader>
48-
<Table.ColumnHeader w='25%'>Error</Table.ColumnHeader>
49-
</Table.Row>
50-
</Table.Header>
51-
<Table.Body>
52-
{pagedChecks.map((check, index) => (
53-
<Table.Row key={`${check.ts}-${index}`}>
54-
<Table.Cell w='30%'>
55-
<Text flex='1' fontSize='sm'>
56-
{formatDistanceToNow(new Date(check.ts), { addSuffix: true })}
57-
</Text>
58-
</Table.Cell>
59-
<Table.Cell w='20%'>
60-
<Badge colorPalette={check.status === 'up' ? 'green' : 'red'} size='sm'>
61-
{check.status.toUpperCase()}
62-
</Badge>
63-
</Table.Cell>
64-
<Table.Cell w='25%'>
65-
<Text fontSize='sm'>{check.rttMs ? `${check.rttMs}ms` : '-'}</Text>
66-
</Table.Cell>
67-
<Table.Cell w='25%'>
68-
<Text flex='1' fontSize='sm' color='gray.500' lineClamp={1}>
69-
{check.error || '-'}
70-
</Text>
71-
</Table.Cell>
48+
<VStack gap={2} align='stretch' h='100%' flex='1'>
49+
<Box flex='1' display='flex' flexDirection='column' minH={0}>
50+
<Table.ScrollArea borderWidth='1px' rounded='md' flex='1' minH={0} overflow='auto'>
51+
<Table.Root size='sm' stickyHeader>
52+
<Table.Header>
53+
<Table.Row bg='gray.100' _dark={{ bg: 'gray.800' }}>
54+
<Table.ColumnHeader w='30%'>Time</Table.ColumnHeader>
55+
<Table.ColumnHeader w='20%'>Status</Table.ColumnHeader>
56+
<Table.ColumnHeader w='25%'>RTT</Table.ColumnHeader>
57+
<Table.ColumnHeader w='25%'>Error</Table.ColumnHeader>
7258
</Table.Row>
73-
))}
74-
</Table.Body>
75-
</Table.Root>
76-
</Table.ScrollArea>
59+
</Table.Header>
60+
<Table.Body>
61+
{pagedChecks.map((check, index) => (
62+
<Table.Row key={`${check.ts}-${index}`}>
63+
<Table.Cell w='30%'>
64+
<Text flex='1' fontSize='sm'>
65+
{formatDistanceToNow(new Date(check.ts), { addSuffix: true })}
66+
</Text>
67+
</Table.Cell>
68+
<Table.Cell w='20%'>
69+
<Badge colorPalette={check.status === 'up' ? 'green' : 'red'} size='sm'>
70+
{check.status.toUpperCase()}
71+
</Badge>
72+
</Table.Cell>
73+
<Table.Cell w='25%'>
74+
<Text fontSize='sm'>{check.rttMs ? `${check.rttMs}ms` : '-'}</Text>
75+
</Table.Cell>
76+
<Table.Cell w='25%'>
77+
<Text flex='1' fontSize='sm' color='gray.500' lineClamp={1}>
78+
{check.error || '-'}
79+
</Text>
80+
</Table.Cell>
81+
</Table.Row>
82+
))}
83+
</Table.Body>
84+
</Table.Root>
85+
</Table.ScrollArea>
7786

78-
{/* Pagination */}
79-
{pageCount > 1 && (
80-
<Box flexShrink={0}>
81-
<Pagination.Root
82-
count={checks.length}
83-
pageSize={pageSize}
84-
page={currentPage}
85-
onPageChange={details => setCurrentPage(details.page)}
86-
>
87-
<ButtonGroup variant='ghost' size='sm' w='full' justifyContent='center'>
88-
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }} flex='1'>
89-
{`Showing ${(currentPage - 1) * pageSize + 1} - ${Math.min(
90-
currentPage * pageSize,
91-
checks.length
92-
)} of ${checks.length} entries`}
93-
</Text>
94-
<Pagination.PrevTrigger asChild>
95-
<IconButton aria-label='Previous page'>
96-
<ChevronLeft />
97-
</IconButton>
98-
</Pagination.PrevTrigger>
99-
<Pagination.Items
100-
render={page => (
101-
<IconButton
102-
key={page.value}
103-
variant={page.value === currentPage ? 'outline' : 'ghost'}
104-
size='sm'
105-
>
106-
{page.value}
87+
{/* Pagination fixed at bottom */}
88+
{pageCount > 1 && (
89+
<Box flexShrink={0} py={2}>
90+
<Pagination.Root
91+
count={checks.length}
92+
pageSize={pageSize}
93+
page={currentPage}
94+
onPageChange={details => setCurrentPage(details.page)}
95+
>
96+
<ButtonGroup variant='ghost' size='sm' w='full' justifyContent='center'>
97+
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }} flex='1'>
98+
{`Showing ${(currentPage - 1) * pageSize + 1} - ${Math.min(
99+
currentPage * pageSize,
100+
checks.length
101+
)} of ${checks.length} entries`}
102+
</Text>
103+
<Pagination.PrevTrigger asChild>
104+
<IconButton aria-label='Previous page'>
105+
<ChevronLeft />
107106
</IconButton>
108-
)}
109-
/>
110-
<Pagination.NextTrigger asChild>
111-
<IconButton aria-label='Next page'>
112-
<ChevronRight />
113-
</IconButton>
114-
</Pagination.NextTrigger>
115-
</ButtonGroup>
116-
</Pagination.Root>
117-
</Box>
118-
)}
107+
</Pagination.PrevTrigger>
108+
<Pagination.Items
109+
render={page => (
110+
<IconButton
111+
key={page.value}
112+
variant={page.value === currentPage ? 'outline' : 'ghost'}
113+
size='sm'
114+
>
115+
{page.value}
116+
</IconButton>
117+
)}
118+
/>
119+
<Pagination.NextTrigger asChild>
120+
<IconButton aria-label='Next page'>
121+
<ChevronRight />
122+
</IconButton>
123+
</Pagination.NextTrigger>
124+
</ButtonGroup>
125+
</Pagination.Root>
126+
</Box>
127+
)}
128+
</Box>
119129
</VStack>
120130
);
121131
}

‎thingconnect.pulse.client/src/pages/EndpointDetail.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -342,9 +342,9 @@ export default function EndpointDetail() {
342342
{/* Statistics */}
343343
<VStack w='full' align='self-start'>
344344
<Heading size='md'>Recent Performance</Heading>
345-
<StatGroup w='full' gap={2}>
345+
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={2} w='full'>
346346
{stats.map(stat => (
347-
<Stat.Root key={stat.key} borderWidth='1px' p='3' rounded='md' h='full' w='25%'>
347+
<Stat.Root key={stat.key} borderWidth='1px' p='3' rounded='md' h='full'>
348348
<HStack w='full' gap={3}>
349349
<Box
350350
bg={`${stat.bg}.100`}
@@ -365,30 +365,30 @@ export default function EndpointDetail() {
365365
</HStack>
366366
</Stat.Root>
367367
))}
368-
</StatGroup>
368+
</SimpleGrid>
369369
</VStack>
370-
371370
{/* Recent Checks and Outages */}
372-
<SimpleGrid columns={{ base: 1, lg: 2 }} gap={2}>
371+
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} gap={2} w='full' h='full'>
373372
{/* Recent Checks */}
374-
<Card.Root>
373+
<Card.Root h='full' display='flex' flexDirection='column'>
375374
<Card.Header px={3} pt={3}>
376375
<Text fontWeight='medium' fontSize='sm'>
377376
Recent Checks
378377
</Text>
379378
</Card.Header>
380-
<Card.Body flex={1} minH={0} p={3}>
379+
<Card.Body flex={1} minH={0} p={3} overflow='auto'>
381380
<RecentChecksTable checks={recent} pageSize={10} />
382381
</Card.Body>
383382
</Card.Root>
383+
384384
{/* Recent Outages */}
385-
<Card.Root>
385+
<Card.Root h='full' display='flex' flexDirection='column'>
386386
<Card.Header p={3} pb={0}>
387387
<Text fontWeight='medium' fontSize='sm'>
388388
Recent Outages
389389
</Text>
390390
</Card.Header>
391-
<Card.Body p={3}>
391+
<Card.Body flex={1} minH={0} p={3} overflow='auto'>
392392
<OutagesList outages={outages} />
393393
</Card.Body>
394394
</Card.Root>

0 commit comments

Comments
 (0)