Fix overflow on combobox for hierarchical model (#5442)

changelog/5431.fixed.md

@@ -0,0 +1 @@
+- Fixed text overflow when there is too many options when selecting a relationship with a hierarchical model

frontend/app/src/entities/ipam/ip-namespace-selector.tsx

@@ -86,8 +86,8 @@ const IpNamespaceSelectorContent = ({ namespaces }: IpNamespaceSelectorContentPr
           {selectedNamespace?.display_label ?? defaultNamespace?.display_label}
         </ComboboxTrigger>
 
-        <ComboboxContent align="start">
-          <ComboboxList fitTriggerWidth={false} className="max-w-md">
+        <ComboboxContent align="start" fitTriggerWidth={false}>
+          <ComboboxList className="max-w-md">
             {namespaces.map((namespace) => (
               <ComboboxItem
                 key={namespace.id}

frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-combobox-list.test.tsx

@@ -185,4 +185,41 @@ describe("RelationshipHierarchicalComboboxList", () => {
     expect(onSelect).toHaveBeenCalledOnce();
     expect(onSelect).toHaveBeenCalledWith(childRelationships[1]);
   });
+
+  it("displays load more button when there are more results", async () => {
+    // GIVEN
+    const manyRelationships = Array.from({ length: 20 }, (_, i) => ({
+      id: `test-id-${i}`,
+      display_label: `Test Relationship ${i}`,
+      __typename: rootSchema.kind,
+    }));
+    vi.mocked(getRelationships).mockResolvedValue(manyRelationships);
+
+    // WHEN
+    const component = render(
+      <RelationshipHierarchicalComboboxList peer={rootSchema.kind} onSelect={vi.fn()} />
+    );
+
+    // THEN
+    await expect.element(component.getByRole("option", { name: "Load more" })).toBeVisible();
+  });
+
+  it("shows scrollbar when there are many options", async () => {
+    // GIVEN
+    const manyRelationships = Array.from({ length: 30 }, (_, i) => ({
+      id: `test-id-${i}`,
+      display_label: `Test Relationship ${i}`,
+      __typename: rootSchema.kind,
+    }));
+    vi.mocked(getRelationships).mockResolvedValue(manyRelationships);
+
+    // WHEN
+    const component = render(
+      <RelationshipHierarchicalComboboxList peer={rootSchema.kind} onSelect={vi.fn()} />
+    );
+
+    // THEN
+    const listbox = component.getByRole("listbox");
+    expect(listbox.element().scrollHeight).toBeGreaterThan(listbox.element().clientHeight);
+  });
 });

frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-input.tsx

@@ -42,13 +42,7 @@ export const RelationshipHierarchicalContent = ({
           <RelationshipComboboxList {...props} />
         </PopoverTabsContent>
 
-        <PopoverTabsContent
-          value="tree"
-          style={{
-            maxHeight: "min(var(--radix-popover-content-available-height), 300px)",
-            width: "var(--radix-popover-trigger-width)",
-          }}
-        >
+        <PopoverTabsContent value="tree">
           <RelationshipHierarchicalComboboxList {...props} />
         </PopoverTabsContent>
       </PopoverTabs>

frontend/app/src/shared/components/inputs/relationship-one.tsx

@@ -137,8 +137,12 @@ export const RelationshipInput = React.forwardRef<
               </PopoverTrigger>
             </Tooltip>
 
-            <ComboboxContent align="end" onOpenAutoFocus={() => loadPoolList()}>
-              <ComboboxList style={{ width: "auto" }}>
+            <ComboboxContent
+              align="end"
+              fitTriggerWidth={false}
+              onOpenAutoFocus={() => loadPoolList()}
+            >
+              <ComboboxList>
                 {!isPoolListLoading && <ComboboxEmpty>No pools found</ComboboxEmpty>}
 
                 {!isPoolListLoading &&

frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-branch-selector.tsx

@@ -36,8 +36,8 @@ export default function BreadcrumbBranchSelector({
         {value}
       </ComboboxTrigger>
 
-      <ComboboxContent align="start">
-        <ComboboxList fitTriggerWidth={false}>
+      <ComboboxContent align="start" fitTriggerWidth={false}>
+        <ComboboxList>
           <CommandEmpty>No branch found.</CommandEmpty>
           {branches.map((branch) => {
             const branchUrl = constructPath(`/branches/${branch.name}`);

frontend/app/src/shared/components/ui/combobox.tsx

@@ -41,32 +41,33 @@ export const ComboboxTrigger = React.forwardRef<HTMLButtonElement, ComboboxTrigg
 
 export const ComboboxContent = React.forwardRef<
   React.ElementRef<typeof PopoverContent>,
-  React.ComponentPropsWithoutRef<typeof PopoverContent>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof PopoverContent> & { fitTriggerWidth?: boolean }
+>(({ className, fitTriggerWidth = true, style, ...props }, ref) => {
   return (
-    <PopoverContent ref={ref} className={classNames("p-0", className)} portal={false} {...props} />
+    <PopoverContent
+      ref={ref}
+      className={classNames("p-0", className)}
+      portal={false}
+      style={{
+        ...(fitTriggerWidth
+          ? { width: "var(--radix-popover-trigger-width)" }
+          : { minWidth: "var(--radix-popover-trigger-width)" }),
+        ...style,
+      }}
+      {...props}
+    />
   );
 });
 
 export const ComboboxList = React.forwardRef<
   React.ElementRef<typeof CommandList>,
   React.ComponentPropsWithoutRef<typeof CommandList> & {
-    fitTriggerWidth?: boolean;
     shouldFilter?: boolean;
     onValueChange?: (search: string) => void;
   }
->(({ fitTriggerWidth = true, style, shouldFilter, autoFocus, onValueChange, ...props }, ref) => {
+>(({ shouldFilter, autoFocus, onValueChange, ...props }, ref) => {
   return (
-    <Command
-      style={{
-        maxHeight: "min(var(--radix-popover-content-available-height), 300px)",
-        ...(fitTriggerWidth
-          ? { width: "var(--radix-popover-trigger-width)" }
-          : { minWidth: "var(--radix-popover-trigger-width)" }),
-        ...style,
-      }}
-      shouldFilter={shouldFilter}
-    >
+    <Command shouldFilter={shouldFilter}>
       <CommandInput placeholder="Filter..." autoFocus={autoFocus} onValueChange={onValueChange} />
       <CommandList ref={ref} {...props} />
     </Command>

frontend/app/src/shared/components/ui/command.tsx

@@ -39,7 +39,10 @@ export const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={classNames("flex-grow p-2 rounded-md overflow-y-auto overflow-x-hidden", className)}
+    className={classNames(
+      "max-h-[300px] flex-grow p-2 rounded-md overflow-y-auto overflow-x-hidden",
+      className
+    )}
     asChild
     {...props}
   />

frontend/app/src/shared/components/ui/pagination.tsx

@@ -84,7 +84,7 @@ export const Pagination = (props: tPaginationType) => {
             <Combobox>
               <ComboboxTrigger data-testid="pagination-size-select">{limit}</ComboboxTrigger>
 
-              <ComboboxContent>
+              <ComboboxContent fitTriggerWidth={false}>
                 <Command>
                   <CommandList>
                     {[10, 20, 50].map((option) => {