From efc0bf6a5bad4eb566d8148735916ed2157da0ec Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 6 Sep 2022 20:51:11 +0200
Subject: [PATCH] event types new dropdown misaligned (#4216)

* fixed event type creation dropdown

* nit
---
 packages/ui/v2/modules/event-types/CreateEventType.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx
index eb8154284f..1737331565 100644
--- a/packages/ui/v2/modules/event-types/CreateEventType.tsx
+++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx
@@ -156,20 +156,22 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
             <Button EndIcon={Icon.FiChevronDown}>{t("new")}</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
+            <DropdownMenuLabel>
+              <div className="max-w-48 shadow-dropdown">{t("new_event_subtitle")}</div>
+            </DropdownMenuLabel>
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             {props.options.map((option) => (
               <DropdownMenuItem
                 key={option.slug}
-                className="cursor-pointer px-3 py-2 hover:bg-neutral-100 focus:outline-none"
+                className="flex cursor-pointer items-center px-3 py-2 hover:bg-neutral-100 focus:outline-none"
                 onSelect={() => openModal(option)}>
                 <Avatar
                   alt={option.name || ""}
                   imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
                   size="sm"
-                  className="inline ltr:mr-2 rtl:ml-2"
+                  className="inline ltr:mr-4 rtl:ml-4"
                 />
-                {option.name ? option.name : option.slug}
+                <span className="px-4">{option.name ? option.name : option.slug}</span>
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>