Skip to content

Commit 7a6dc00

Browse files
abishekveabishekve
committed
pafe overflow fixed
1 parent fc475b7 commit 7a6dc00

File tree

2 files changed

+83
-85
lines changed

2 files changed

+83
-85
lines changed

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

Lines changed: 78 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -46,89 +46,87 @@ export function RecentChecksTable({ checks, pageSize = 10 }: RecentChecksTablePr
4646
}
4747

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

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

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -369,27 +369,27 @@ export default function EndpointDetail() {
369369
</SimpleGrid>
370370
</VStack>
371371
{/* Recent Checks and Outages */}
372-
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} gap={2} w='full' h='full'>
372+
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} gap={2} w='full' h='full' overflow='auto'>
373373
{/* Recent Checks */}
374-
<Card.Root h='full' display='flex' flexDirection='column'>
374+
<Card.Root flex={1} display='flex' flexDirection='column' overflow='hidden' size={'sm'}>
375375
<Card.Header px={3} pt={3}>
376376
<Text fontWeight='medium' fontSize='sm'>
377377
Recent Checks
378378
</Text>
379379
</Card.Header>
380-
<Card.Body flex={1} minH={0} p={3} overflow='auto'>
380+
<Card.Body flex={1} display='flex' flexDirection='column' minH={0} p={3}>
381381
<RecentChecksTable checks={recent} pageSize={10} />
382382
</Card.Body>
383383
</Card.Root>
384384

385385
{/* Recent Outages */}
386-
<Card.Root h='full' display='flex' flexDirection='column'>
386+
<Card.Root h='full' display='flex' flex={1} flexDirection='column'>
387387
<Card.Header p={3} pb={0}>
388388
<Text fontWeight='medium' fontSize='sm'>
389389
Recent Outages
390390
</Text>
391391
</Card.Header>
392-
<Card.Body flex={1} minH={0} p={3} overflow='auto'>
392+
<Card.Body flex={1} display='flex' flexDirection='column' minH={0} p={3}>
393393
<OutagesList outages={outages} isLoading={isLoading} />
394394
</Card.Body>
395395
</Card.Root>

0 commit comments

Comments
 (0)