Fixed dropdown width according to items (#4995)

* Fixed dropdown width according to items

* Add the “Add” before the calendar type item

* Fix dropdown cut off on mobile

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>

apps/web/components/v2/apps/AdditionalCalendarSelector.tsx

@@ -27,7 +27,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
             {data.image && (
               <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
             )}
-            <p>{data.label}</p>
+            <p>{`${t("add")} ${data.label}`}</p>
           </Button>
         );
       }}
@@ -35,7 +35,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
   ) : (
     <Button className="w-full" color="minimal" href="/apps/categories/calendar">
       <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("add_new_calendar")}...</p>
+      <p>{t("install_new_calendar_app")}</p>
     </Button>
   );
 };
@@ -63,11 +63,43 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Select
             name="additionalCalendar"
-            placeholder={t("install_another")}
+            placeholder={
+              <Button className="rounded-md" StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
+            }
             options={options}
             isSearchable={false}
             isLoading={isLoading}
             components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "inherit",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
           />
         );
       }}

apps/web/components/v2/apps/CalendarListContainer.tsx

@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}
-                      className="mb-0 flex flex-wrap items-center gap-4 md:mb-3 md:gap-0"
+                      className="mb-0 flex flex-wrap items-center gap-4 sm:flex-nowrap md:mb-3 md:gap-0"
                       actions={
                         <div className="flex flex-col xl:flex-row xl:space-x-5">
                           {!!data.connectedCalendars.length && (

apps/web/public/static/locales/en/common.json

@@ -1311,5 +1311,6 @@
   "after_event_trigger": "after event ends",
   "how_long_after": "How long after event ends?",
   "no_available_slots": "No Available slots",
-  "time_available": "Time available"
+  "time_available": "Time available",
+  "install_new_calendar_app": "Install new calendar app"
 }