From 7fcb3f2c314f5795c5c7743f7ba18e9bc9c67a81 Mon Sep 17 00:00:00 2001
From: killian-larcher <killian.larcher@optimusai.fr>
Date: Wed, 28 Jan 2026 19:48:40 +0100
Subject: [PATCH] fix: adjust organisation dropdown size.

---
 .../logged-in/logged-in-button.server.tsx     |   3 +-
 .../common/logged-in/logged-in-button.tsx     |   8 +-
 .../organization/organization-combobox.tsx    | 203 +++++++++---------
 3 files changed, 110 insertions(+), 104 deletions(-)

diff --git a/src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx b/src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx
index 61e75474..c8432500 100644
--- a/src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx
+++ b/src/components/wrappers/dashboard/common/logged-in/logged-in-button.server.tsx
@@ -3,6 +3,7 @@ import {getAccounts, getSession, getSessions} from "@/lib/auth/auth";
 import {LoggedInButtonClient} from "./logged-in-button";
 import {SUPPORTED_PROVIDERS} from "../../../../../../portabase.config";
 
+
 export const LoggedInButton = async () => {
     const user = await currentUser();
     const sessions = await getSessions();
@@ -16,7 +17,7 @@ export const LoggedInButton = async () => {
         <LoggedInButtonClient
             user={user}
             sessions={sessions}
-             // @ts-ignore
+            // @ts-ignore
             currentSession={currentSession.session}
             accounts={accounts}
             providers={SUPPORTED_PROVIDERS.filter((p) => p.isActive)}
diff --git a/src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx b/src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx
index 4305a50a..9fc32608 100644
--- a/src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx
+++ b/src/components/wrappers/dashboard/common/logged-in/logged-in-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {ChevronsUpDown, ChevronUp} from "lucide-react";
+import {ChevronsUpDown} from "lucide-react";
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
 import {SidebarMenuButton} from "@/components/ui/sidebar";
 import {LoggedInDropdown} from "./logged-in-dropdown";
@@ -15,6 +15,7 @@ type LoggedInButtonClientProps = {
     providers: AuthProviderConfig[]
 }
 
+
 export const LoggedInButtonClient = ({
                                          user,
                                          sessions,
@@ -35,14 +36,15 @@ export const LoggedInButtonClient = ({
             accounts={accounts}
             providers={providers}
         >
-            <SidebarMenuButton type="button" className="h-auto  justify-between py-2" >
+            <SidebarMenuButton type="button" className="h-auto  justify-between py-2">
                 <div className="flex items-center gap-2">
                     <Avatar className="size-6">
                         <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
                         {user.image && <AvatarImage src={user.image}/>}
                     </Avatar>
                     <div className="flex flex-col items-start">
-                        <span className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
+                        <span
+                            className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
                         <span
                             className="text-xs text-muted-foreground max-w-[170px] truncate"
                             title={user.email}
diff --git a/src/components/wrappers/dashboard/organization/organization-combobox.tsx b/src/components/wrappers/dashboard/organization/organization-combobox.tsx
index e6686fb0..9d3f4898 100644
--- a/src/components/wrappers/dashboard/organization/organization-combobox.tsx
+++ b/src/components/wrappers/dashboard/organization/organization-combobox.tsx
@@ -1,36 +1,36 @@
 "use client"
 
 import * as React from "react"
-import { Building2, Check, ChevronsUpDown, Plus } from "lucide-react"
-import { useRouter } from "next/navigation"
-import { authClient } from "@/lib/auth/auth-client"
-import { cn } from "@/lib/utils"
+import {Building2, Check, ChevronsUpDown, Plus} from "lucide-react"
+import {useRouter} from "next/navigation"
+import {authClient} from "@/lib/auth/auth-client"
+import {cn} from "@/lib/utils"
 
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
+    DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
-    SidebarMenuButton,
-    useSidebar,
+    SidebarMenuButton, useSidebar,
 } from "@/components/ui/sidebar"
-import { CreateOrganizationModal } from "@/components/wrappers/dashboard/organization/create-organisation-modal"
-import { Skeleton } from "@/components/ui/skeleton"
+import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal"
+import {Skeleton} from "@/components/ui/skeleton"
+
 
 export function OrganizationCombobox() {
     const router = useRouter()
-    const { isMobile, state } = useSidebar()
-    const { data: organizations, isPending: isPendingList, refetch } = authClient.useListOrganizations()
-    const { data: activeOrganization, isPending: isPendingActive, refetch: refetchActiveOrga } = authClient.useActiveOrganization()
+    const {isMobile, state} = useSidebar()
+    const {data: organizations, isPending: isPendingList, refetch} = authClient.useListOrganizations()
+    const {
+        data: activeOrganization,
+        isPending: isPendingActive,
+        refetch: refetchActiveOrga
+    } = authClient.useActiveOrganization()
     const [openModal, setOpenModal] = React.useState(false)
     const [isOpen, setIsOpen] = React.useState(false)
 
     const handleSelect = async (slug: string) => {
         if (activeOrganization?.slug === slug) return
-        await authClient.organization.setActive({ organizationSlug: slug })
+        await authClient.organization.setActive({organizationSlug: slug})
         router.refresh()
         setIsOpen(false)
     }
@@ -41,90 +41,91 @@ export function OrganizationCombobox() {
         router.refresh();
     };
 
-        const orgs = organizations || []
-
-        if (isPendingList || isPendingActive) {
-            return (
-                <SidebarMenuButton size="lg" className="pointer-events-none">
-                    <Skeleton className="size-8 rounded-lg shrink-0" />
-                    <div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
-                        <Skeleton className="h-4 w-24" />
-                        <Skeleton className="h-3 w-16" />
-                    </div>
-                    <Skeleton className="size-4 shrink-0" />
-                </SidebarMenuButton>
-            )
-        }
-
-    
+    const orgs = organizations || []
 
+    if (isPendingList || isPendingActive) {
         return (
-            <>
-                <CreateOrganizationModal
-                    open={openModal}
-                    onSuccess={handleReload}
-                    onOpenChange={setOpenModal}
-                />
-                <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-                    <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton
-                            size="lg"
-                            className={cn(
-                                "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
-                                state === "collapsed" && "justify-center p-0"
+            <SidebarMenuButton size="lg" className="pointer-events-none">
+                <Skeleton className="size-8 rounded-lg shrink-0"/>
+                <div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
+                    <Skeleton className="h-4 w-24"/>
+                    <Skeleton className="h-3 w-16"/>
+                </div>
+                <Skeleton className="size-4 shrink-0"/>
+            </SidebarMenuButton>
+        )
+    }
+
+
+    return (
+        <>
+            <CreateOrganizationModal
+                open={openModal}
+                onSuccess={handleReload}
+                onOpenChange={setOpenModal}
+            />
+            <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+                <DropdownMenuTrigger asChild>
+                    <SidebarMenuButton
+                        size="lg"
+                        className={cn(
+                            "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
+                            state === "collapsed" && "justify-center p-0"
+                        )}
+                    >
+                        <div className={cn(
+                            "flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
+                            activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
+                            isOpen && "scale-105"
+                        )}>
+                            {activeOrganization?.logo ? (
+                                <img src={activeOrganization.logo} alt={activeOrganization.name}
+                                     className="size-8 rounded-lg object-cover"/>
+                            ) : (
+                                <Building2 className="size-5"/>
                             )}
-                        >
-                            <div className={cn(
-                                "flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
-                                activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
-                                isOpen && "scale-105"
-                            )}>
-                                {activeOrganization?.logo ? (
-                                    <img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" />
-                                ) : (
-                                    <Building2 className="size-5" />
-                                )}
-                            </div>
-                            <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                        </div>
+                        <div
+                            className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                                 <span className="truncate font-semibold tracking-tight">
                                     {activeOrganization?.name || "Select Organization"}
                                 </span>
-                            </div>
-                            <ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden" />
-                        </SidebarMenuButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                        className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl border-2 border-border bg-popover shadow-none"
-                        align="start"
-                        side={isMobile ? "bottom" : "right"}
-                        sideOffset={4}
-                    >
-                        {orgs.map((org) => {
-                            const isActive = activeOrganization?.id === org.id;
-                            return (
-                                <DropdownMenuItem
-                                    key={org.id}
-                                    onClick={() => handleSelect(org.slug)}
-                                    className={cn(
-                                        "group gap-1 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
-                                        isActive 
-                                            ? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20" 
-                                            : "focus:bg-accent hover:bg-accent/50 border border-transparent"
-                                    )}>
-                                    <div className={cn(
-                                        "flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
-                                        org.logo ? "bg-transparent border-transparent" : "",
-                                        isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
-                                    )}>
-                                        {org.logo ? (
-                                            <img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover" />
-                                        ) : (
-                                            <Building2 className={cn(
-                                                "size-5",
-                                                isActive ? "text-white" : "text-muted-foreground"
-                                            )} />
-                                        )}
-                                    </div>
+                        </div>
+                        <ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden"/>
+                    </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    className="min-w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
+                    align="start"
+                    side="bottom"
+                    sideOffset={4}
+                >
+                    {orgs.map((org) => {
+                        const isActive = activeOrganization?.id === org.id;
+                        return (
+                            <DropdownMenuItem
+                                key={org.id}
+                                onClick={() => handleSelect(org.slug)}
+                                className={cn(
+                                    "group gap-2 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
+                                    isActive
+                                        ? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20"
+                                        : "focus:bg-accent hover:bg-accent/50 border border-transparent"
+                                )}>
+                                <div className={cn(
+                                    "flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
+                                    org.logo ? "bg-transparent border-transparent" : "",
+                                    isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
+                                )}>
+                                    {org.logo ? (
+                                        <img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover"/>
+                                    ) : (
+                                        <Building2 className={cn(
+                                            "size-5",
+                                            isActive ? "text-white" : "text-muted-foreground"
+                                        )}/>
+                                    )}
+                                </div>
                                 <div className="flex flex-col gap-0.5">
                                     <span className={cn(
                                         "text-sm max-w-42.5 truncate font-medium leading-none",
@@ -132,20 +133,22 @@ export function OrganizationCombobox() {
                                     )}>{org.name}</span>
                                 </div>
                                 {isActive && (
-                                    <div className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
-                                        <Check className="size-3 text-white" strokeWidth={3} />
+                                    <div
+                                        className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
+                                        <Check className="size-3 text-white" strokeWidth={3}/>
                                     </div>
                                 )}
                             </DropdownMenuItem>
                         )
                     })}
-                    <DropdownMenuSeparator className="my-2 bg-border/50" />
+                    <DropdownMenuSeparator className="my-2 bg-border/50"/>
                     <DropdownMenuItem
                         className="gap-3 p-2.5 cursor-pointer text-muted-foreground focus:text-foreground group rounded-lg"
                         onClick={() => setOpenModal(true)}
                     >
-                        <div className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
-                            <Plus className="size-4" />
+                        <div
+                            className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
+                            <Plus className="size-4"/>
                         </div>
                         <div className="font-medium">Create new organization</div>
                     </DropdownMenuItem>