fix: wider clickable area in collapsible table row

traefik · Jan 25, 2024 · ab4860c · ab4860c
1 parent 9fe8d3e
commit ab4860c
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/components/Table/Table.tsx b/components/Table/Table.tsx
@@ -217,16 +217,25 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
         >
           {emptyFirstColumn ? tableHead ? <Th css={{ width: 24 }} /> : <Td /> : null}
           {!!collapsedContent && (
-            <Td>
+            <Td
+              css={{ padding: '0 0 0 $3' }}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
               <Flex
                 align="center"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
+                justify="center"
+                css={{
+                  height: '40px',
+                  '&:hover': {
+                    color: '$tableActiveText',
+                  },
                 }}
+                onClick={() => setIsCollapsed(!isCollapsed)}
               >
                 <ChevronRightIcon
-                  onClick={() => setIsCollapsed(!isCollapsed)}
                   style={{
                     cursor: 'pointer',
                     transition: 'transform 0.2s ease-out',