fix(nodes-table): prevent filter dropdown from being clipped inside table (#2345)

* fix(nodes-table): prevent filter dropdown from being clipped inside table scroll container

Signed-off-by: hemahg <hhg@redhat.com>

* fix(nodes-table): prevent filter dropdown from being clipped inside table scroll container

Signed-off-by: hemahg <hhg@redhat.com>

---------

Signed-off-by: hemahg <hhg@redhat.com>

Author: hemahg

ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/NodesTable.tsx

@@ -131,11 +131,11 @@ export function NodesTable({
   ) as ControllerStatus[];
 
   return (
-    <Card>
+    <Card isFullHeight>
       <CardHeader>
         <CardTitle className="pf-v6-u-pl-md">{t("nodes.title")}</CardTitle>
       </CardHeader>
-      <CardBody>
+      <CardBody isFilled style={{ minHeight: "600px" }}>
         <TableView
           page={page}
           perPage={perPage}
@@ -322,7 +322,9 @@ export function NodesTable({
                               name: `Used capacity: ${formatBytes(diskUsage!)}`,
                             },
                             {
-                              name: `Available: ${formatBytes(diskCapacity! - diskUsage!)}`,
+                              name: `Available: ${formatBytes(
+                                diskCapacity! - diskUsage!,
+                              )}`,
                             },
                           ]}
                           legendOrientation="vertical"

ui/components/Table/Toolbar/ChipFilter/components/FilterGroupedCheckbox.tsx

@@ -28,7 +28,13 @@ export function FilterGroupedCheckbox<T extends string | number>({
   return (
     <Select
       aria-label={label}
-      popperProps={{ appendTo: "inline" }}
+      popperProps={{
+        appendTo: () => document.body,
+        placement: "bottom-start",
+        enableFlip: true,
+        flipBehavior: ["bottom"],
+        preventOverflow: true,
+      }}
       onSelect={(_, value) => {
         onToggle(value as T);
         setIsOpen(false);