fix(dropdown): limit content height to available viewport space (#609)

Author: invisal

.changeset/fair-ways-remember.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Limit Dropdown content height to available viewport space to prevent overflow.

packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx

@@ -238,6 +238,24 @@ export function DropdownAvatarTriggerDemo() {
   );
 }
 
+/**
+ * A dropdown with a very long list of items to demonstrate the max-height
+ * behavior — the content scrolls when it exceeds available viewport space.
+ */
+export function DropdownLongListDemo() {
+  const items = Array.from({ length: 30 }, (_, i) => `Option ${i + 1}`);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>Open long list</Button>} />
+      <DropdownMenu.Content>
+        {items.map((item) => (
+          <DropdownMenu.Item key={item}>{item}</DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+}
 /**
  * Demonstrates the new LinkItem component for navigation links.
  * Use LinkItem instead of Item with href for cleaner, more semantic links.

packages/kumo-docs-astro/src/pages/components/dropdown.mdx

@@ -17,6 +17,7 @@ import {
   DropdownNestedDemo,
   DropdownAvatarTriggerDemo,
   DropdownLinkItemDemo,
+  DropdownLongListDemo,
 } from "~/components/demos/DropdownDemo";
 
 {/* Hero Demo */}
@@ -155,6 +156,16 @@ export default function Example() {
   <DropdownLinkItemDemo client:load />
 </ComponentExample>
 
+### Long List
+
+<p>
+  When a dropdown contains many items, the content automatically limits its height
+  to the available viewport space and becomes scrollable.
+</p>
+<ComponentExample demo="DropdownLongListDemo">
+  <DropdownLongListDemo client:load />
+</ComponentExample>
+
 </ComponentSection>
 
 {/* API Reference */}

packages/kumo/src/components/dropdown/dropdown.tsx

@@ -49,7 +49,13 @@ export interface KumoDropdownVariantsProps {
 export function dropdownVariants({
   variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,
 }: KumoDropdownVariantsProps = {}) {
-  return cn(resolveVariant(KUMO_DROPDOWN_VARIANTS.variant, variant, KUMO_DROPDOWN_DEFAULT_VARIANTS.variant).classes);
+  return cn(
+    resolveVariant(
+      KUMO_DROPDOWN_VARIANTS.variant,
+      variant,
+      KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,
+    ).classes,
+  );
 }
 
 const DropdownMenuSubTrigger = React.forwardRef<
@@ -112,6 +118,7 @@ const DropdownMenuContent = React.forwardRef<
           <DropdownMenuPrimitive.Popup
             className={cn(
               "overflow-hidden bg-kumo-control text-kumo-default", // background
+              "max-h-[var(--available-height)] overflow-y-auto", // limit height when list is too long and might go off screen
               "rounded-lg shadow-lg ring ring-kumo-line", // border part
               "min-w-36 p-1.5", // spacing
               "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", // open animation