fix(frontend): stabilize multiselect behavior and UI spacing (#154)

* fix(frontend): left-align announcement logo in homepage banner

* fix(frontend): keep multiselect panels floating and preserve summaries

* fix(frontend): rebalance config card header spacing

* fix(frontend): normalize formatting and fix multiselect modal behavior

* fix(frontend): restore config divider spacing on desktop

vite-frontend/src/shadcn-bridge/heroui/button.tsx

@@ -4,8 +4,20 @@ import { Loader2Icon } from "lucide-react";
 import { Button as BaseButton } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-type HeroButtonColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
-type HeroButtonVariant = "solid" | "light" | "flat" | "ghost" | "bordered" | "shadow";
+type HeroButtonColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger";
+type HeroButtonVariant =
+  | "solid"
+  | "light"
+  | "flat"
+  | "ghost"
+  | "bordered"
+  | "shadow";
 type HeroButtonSize = "sm" | "md" | "lg";
 
 export interface ButtonProps
@@ -20,7 +32,17 @@ export interface ButtonProps
   variant?: HeroButtonVariant;
 }
 
-function mapVariant(color: HeroButtonColor, variant: HeroButtonVariant): "default" | "destructive" | "secondary" | "outline" | "ghost" | "light" | "flat" {
+function mapVariant(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+):
+  | "default"
+  | "destructive"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "light"
+  | "flat" {
   if (variant === "bordered") {
     return "outline";
   }
@@ -43,7 +65,10 @@ function mapVariant(color: HeroButtonColor, variant: HeroButtonVariant): "defaul
   return "default";
 }
 
-function mapSize(size: HeroButtonSize, isIconOnly: boolean): "default" | "sm" | "lg" | "icon" {
+function mapSize(
+  size: HeroButtonSize,
+  isIconOnly: boolean,
+): "default" | "sm" | "lg" | "icon" {
   if (isIconOnly) {
     return "icon";
   }
@@ -67,33 +92,46 @@ const solidColorClassMap: Partial<Record<HeroButtonColor, string>> = {
 const borderedColorClassMap: Record<HeroButtonColor, string> = {
   default:
     "border-default-300 text-default-700 hover:bg-default-100 dark:border-default-300 dark:text-default-600 dark:hover:bg-default-200/40",
-  primary: "border-primary text-primary hover:bg-primary-50 dark:border-primary-500/60 dark:text-primary-300 dark:hover:bg-primary-900/20",
+  primary:
+    "border-primary text-primary hover:bg-primary-50 dark:border-primary-500/60 dark:text-primary-300 dark:hover:bg-primary-900/20",
   secondary:
     "border-secondary text-secondary hover:bg-secondary-50 dark:border-secondary-500/60 dark:text-secondary-300 dark:hover:bg-secondary-900/20",
-  success: "border-success text-success hover:bg-success-50 dark:border-success-500/60 dark:text-success-300 dark:hover:bg-success-900/20",
+  success:
+    "border-success text-success hover:bg-success-50 dark:border-success-500/60 dark:text-success-300 dark:hover:bg-success-900/20",
   warning:
     "border-warning text-warning-700 hover:bg-warning-50 dark:border-warning-500/60 dark:text-warning-300 dark:hover:bg-warning-900/20",
-  danger: "border-danger text-danger hover:bg-danger-50 dark:border-danger-500/60 dark:text-danger-300 dark:hover:bg-danger-900/20",
+  danger:
+    "border-danger text-danger hover:bg-danger-50 dark:border-danger-500/60 dark:text-danger-300 dark:hover:bg-danger-900/20",
 };
 
 const lightColorClassMap: Record<HeroButtonColor, string> = {
-  default: "text-default-700 hover:bg-default-100 dark:text-default-600 dark:hover:bg-default-200/40",
-  primary: "text-primary hover:bg-primary-100/70 dark:text-primary-300 dark:hover:bg-primary-900/30",
-  secondary: "text-secondary hover:bg-secondary-100/70 dark:text-secondary-300 dark:hover:bg-secondary-900/30",
-  success: "text-success hover:bg-success-100/70 dark:text-success-300 dark:hover:bg-success-900/30",
-  warning: "text-warning-700 hover:bg-warning-100/70 dark:text-warning-300 dark:hover:bg-warning-900/30",
-  danger: "text-danger hover:bg-danger-100/70 dark:text-danger-300 dark:hover:bg-danger-900/30",
+  default:
+    "text-default-700 hover:bg-default-100 dark:text-default-600 dark:hover:bg-default-200/40",
+  primary:
+    "text-primary hover:bg-primary-100/70 dark:text-primary-300 dark:hover:bg-primary-900/30",
+  secondary:
+    "text-secondary hover:bg-secondary-100/70 dark:text-secondary-300 dark:hover:bg-secondary-900/30",
+  success:
+    "text-success hover:bg-success-100/70 dark:text-success-300 dark:hover:bg-success-900/30",
+  warning:
+    "text-warning-700 hover:bg-warning-100/70 dark:text-warning-300 dark:hover:bg-warning-900/30",
+  danger:
+    "text-danger hover:bg-danger-100/70 dark:text-danger-300 dark:hover:bg-danger-900/30",
 };
 
 const flatColorClassMap: Record<HeroButtonColor, string> = {
   default:
     "bg-default-100 text-default-700 hover:bg-default-200 dark:bg-default-100/45 dark:text-default-700 dark:hover:bg-default-200/60",
-  primary: "bg-primary-100 text-primary-700 hover:bg-primary-200 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45",
+  primary:
+    "bg-primary-100 text-primary-700 hover:bg-primary-200 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/45",
   secondary:
     "bg-secondary-100 text-secondary-700 hover:bg-secondary-200 dark:bg-secondary-900/30 dark:text-secondary-300 dark:hover:bg-secondary-900/45",
-  success: "bg-success-100 text-success-700 hover:bg-success-200 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/45",
-  warning: "bg-warning-100 text-warning-700 hover:bg-warning-200 dark:bg-warning-900/30 dark:text-warning-300 dark:hover:bg-warning-900/45",
-  danger: "bg-danger-100 text-danger-700 hover:bg-danger-200 dark:bg-danger-900/30 dark:text-danger-300 dark:hover:bg-danger-900/45",
+  success:
+    "bg-success-100 text-success-700 hover:bg-success-200 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/45",
+  warning:
+    "bg-warning-100 text-warning-700 hover:bg-warning-200 dark:bg-warning-900/30 dark:text-warning-300 dark:hover:bg-warning-900/45",
+  danger:
+    "bg-danger-100 text-danger-700 hover:bg-danger-200 dark:bg-danger-900/30 dark:text-danger-300 dark:hover:bg-danger-900/45",
 };
 
 const shadowColorClassMap: Record<HeroButtonColor, string> = {
@@ -105,7 +143,10 @@ const shadowColorClassMap: Record<HeroButtonColor, string> = {
   danger: "shadow-md shadow-danger-500/35",
 };
 
-function mapColorClass(color: HeroButtonColor, variant: HeroButtonVariant): string {
+function mapColorClass(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+): string {
   if (variant === "bordered") {
     return borderedColorClassMap[color];
   }
@@ -122,7 +163,10 @@ function mapColorClass(color: HeroButtonColor, variant: HeroButtonVariant): stri
   return "";
 }
 
-function mapShadowClass(color: HeroButtonColor, variant: HeroButtonVariant): string {
+function mapShadowClass(
+  color: HeroButtonColor,
+  variant: HeroButtonVariant,
+): string {
   if (variant !== "shadow") {
     return "";
   }
@@ -169,16 +213,23 @@ export const Button = React.forwardRef<
 
     return (
       <BaseButton
-        className={cn(isIconOnly ? "p-0" : "", resolvedColorClass, resolvedShadowClass, className)}
-        disabled={resolvedDisabled}
         ref={ref}
+        className={cn(
+          isIconOnly ? "p-0" : "",
+          resolvedColorClass,
+          resolvedShadowClass,
+          className,
+        )}
+        disabled={resolvedDisabled}
         size={resolvedSize}
         type={type}
         variant={resolvedVariant}
         onClick={handleClick}
         {...props}
       >
-        {isLoading ? <Loader2Icon className="mr-2 h-4 w-4 animate-spin" /> : null}
+        {isLoading ? (
+          <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
+        ) : null}
         {startContent}
         {isIconOnly ? null : children}
         {isIconOnly ? children : null}