refactor(webui): narrow floating control migration

webui/src/components/ui/dropdown-menu.tsx

@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       floatingSurfaceClassName,
-      "min-w-[10rem]",
+      "max-h-[min(var(--radix-dropdown-menu-content-available-height),28rem)] min-w-[10rem]",
       className,
     )}
     {...props}
@@ -74,7 +74,7 @@ const DropdownMenuContent = React.forwardRef<
       className={cn(
         floatingSurfaceClassName,
         floatingSurfaceMotionClassName,
-        "min-w-[10rem]",
+        "max-h-[min(var(--radix-dropdown-menu-content-available-height),28rem)] min-w-[10rem]",
         className,
       )}
       {...props}
@@ -130,32 +130,20 @@ DropdownMenuCheckboxItem.displayName =
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-    indicator?: "dot" | "check";
-    indicatorPosition?: "start" | "end";
-  }
->(({ className, children, indicator = "dot", indicatorPosition = "start", ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
       menuItemClassName,
-      indicatorPosition === "start" ? "pl-8 pr-2.5" : "pl-2.5 pr-8",
+      "pl-8 pr-2.5",
       className,
     )}
     {...props}
   >
-    <span
-      className={cn(
-        "absolute flex h-3.5 w-3.5 items-center justify-center",
-        indicatorPosition === "start" ? "left-2.5" : "right-2.5",
-      )}
-    >
+    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        {indicator === "check" ? (
-          <Check className="h-3.5 w-3.5" />
-        ) : (
-          <Circle className="h-2 w-2 fill-current" />
-        )}
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

webui/src/components/ui/floating-surface.ts

@@ -2,7 +2,7 @@ export const floatingSurfaceVisualClassName =
   "rounded-[18px] border border-border/65 bg-popover/96 p-1.5 text-popover-foreground shadow-[0_18px_55px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_22px_55px_rgba(0,0,0,0.45)]";
 
 export const floatingSurfaceClassName =
-  `${floatingSurfaceVisualClassName} z-50 max-h-[min(var(--radix-popper-available-height),28rem)] overflow-x-hidden overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent`;
+  `${floatingSurfaceVisualClassName} z-50 overflow-x-hidden overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent`;
 
 export const floatingSurfaceMotionClassName =
   "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";

webui/src/components/ui/popover.tsx

@@ -26,6 +26,7 @@ const PopoverContent = React.forwardRef<
       className={cn(
         floatingSurfaceClassName,
         floatingSurfaceMotionClassName,
+        "max-h-[min(var(--radix-popover-content-available-height),28rem)]",
         className,
       )}
       {...props}