Merge pull request #49 from Portabase/feat/organization-dropdown

fix: adjust organisation dropdown size.

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();

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,
@@ -42,7 +43,8 @@ export const LoggedInButtonClient = ({
                         {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}

src/components/wrappers/dashboard/organization/organization-combobox.tsx

@@ -7,24 +7,24 @@ import { authClient } from "@/lib/auth/auth-client"
 import {cn} from "@/lib/utils"
 
 import {
-    DropdownMenu,
+    DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
-    SidebarMenuButton,
+    SidebarMenuButton, useSidebar,
-    useSidebar,
 } from "@/components/ui/sidebar"
 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 {
+        data: activeOrganization,
+        isPending: isPendingActive,
+        refetch: refetchActiveOrga
+    } = authClient.useActiveOrganization()
     const [openModal, setOpenModal] = React.useState(false)
     const [isOpen, setIsOpen] = React.useState(false)
 
@@ -57,7 +57,6 @@ export function OrganizationCombobox() {
     }
 
 
-
     return (
         <>
             <CreateOrganizationModal
@@ -80,12 +79,14 @@ export function OrganizationCombobox() {
                             isOpen && "scale-105"
                         )}>
                             {activeOrganization?.logo ? (
-                                    <img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" />
+                                <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
+                            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>
@@ -94,9 +95,9 @@ export function OrganizationCombobox() {
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
-                        className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl border-2 border-border bg-popover shadow-none"
+                    className="min-w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
                     align="start"
-                        side={isMobile ? "bottom" : "right"}
+                    side="bottom"
                     sideOffset={4}
                 >
                     {orgs.map((org) => {
@@ -106,7 +107,7 @@ export function OrganizationCombobox() {
                                 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",
+                                    "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"
@@ -132,7 +133,8 @@ 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">
+                                    <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>
                                 )}
@@ -144,7 +146,8 @@ export function OrganizationCombobox() {
                         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">
+                        <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>