chore: drop-downs improvements and bug fixes (#3433)

* chore: dropdowns should close on selecting an option * style: @plane/ui dropdown styling * refactor: @plane/ui dropdowns * fix: build errors * fix: list layout dropdowns positioning * fix: priority dropdown text in dark mode
2024-06-14 14:31:34 +00:00 · 2024-01-23 14:25:09 +05:30 · 2024-01-23 14:25:09 +05:30 · 801f75f406
commit 801f75f406
parent f88109ef04
52 changed files with 308 additions and 394 deletions
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@ -1,17 +1,15 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-// react-popper
+import { Menu } from "@headlessui/react";
 import { usePopper } from "react-popper";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Menu } from "@headlessui/react";
-// type
-import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
-// icons
-import { ChevronDown, MoreHorizontal } from "lucide-react";
+// helpers
 import { cn } from "../../helpers";
+// types
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";

 const CustomMenu = (props: ICustomMenuDropdownProps) => {
  const {
@ -29,7 +27,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    noChevron = false,
    optionsClassName = "",
    verticalEllipsis = false,
-    width = "auto",
    portalElement,
    menuButtonOnClick,
    tabIndex,
@ -63,17 +60,16 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
      static
    >
      <div
-        className={`my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${
-          maxHeight === "lg"
-            ? "max-h-60"
-            : maxHeight === "md"
-              ? "max-h-48"
-              : maxHeight === "rg"
-                ? "max-h-36"
-                : maxHeight === "sm"
-                  ? "max-h-28"
-                  : ""
-        } ${width === "auto" ? "min-w-[12rem] whitespace-nowrap" : width} ${optionsClassName}`}
+        className={cn(
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          {
+            "max-h-60": maxHeight === "lg",
+            "max-h-48": maxHeight === "md",
+            "max-h-36": maxHeight === "rg",
+            "max-h-28": maxHeight === "sm",
+          },
+          optionsClassName
+        )}
        ref={setPopperElement}
        style={styles.popper}
        {...attributes.popper}
@ -92,7 +88,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
      as="div"
      ref={dropdownRef}
      tabIndex={tabIndex}
-      className={`relative w-min text-left ${className}`}
+      className={cn("relative w-min text-left", className)}
      onKeyDown={handleKeyDown}
    >
      {({ open }) => (
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Combobox } from "@headlessui/react";
-// icons
-import { Check, ChevronDown, Search } from "lucide-react";
+// helpers
+import { cn } from "../../helpers";
 // types
 import { ICustomSearchSelectProps } from "./helper";

@ -31,7 +29,6 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
    onOpen,
    optionsClassName = "",
    value,
-    width = "auto",
    tabIndex,
  } = props;
  const [query, setQuery] = useState("");
@ -70,7 +67,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
      as="div"
      ref={dropdownRef}
      tabIndex={tabIndex}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
      onKeyDown={handleKeyDown}
      {...comboboxProps}
    >
@ -114,37 +111,33 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
              </Combobox.Button>
            )}
            {isOpen && (
-              <Combobox.Options as={React.Fragment} static>
+              <Combobox.Options className="fixed z-10" static>
                <div
-                  className={`z-10 my-1 min-w-[10rem] rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-custom-shadow-rg focus:outline-none ${
-                    width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
-                  } ${optionsClassName}`}
+                  className={cn(
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
+                    optionsClassName
+                  )}
                  ref={setPopperElement}
                  style={styles.popper}
                  {...attributes.popper}
                >
-                  <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                    <Search className="h-3 w-3 text-custom-text-200" />
+                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
                    <Combobox.Input
-                      className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                      value={query}
                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Type to search..."
+                      placeholder="Search"
                      displayValue={(assigned: any) => assigned?.name}
                    />
                  </div>
                  <div
-                    className={`mt-2 space-y-1 ${
-                      maxHeight === "lg"
-                        ? "max-h-60"
-                        : maxHeight === "md"
-                          ? "max-h-48"
-                          : maxHeight === "rg"
-                            ? "max-h-36"
-                            : maxHeight === "sm"
-                              ? "max-h-28"
-                              : ""
-                    } overflow-y-scroll`}
+                    className={cn("mt-2 space-y-1 overflow-y-scroll", {
+                      "max-h-60": maxHeight === "lg",
+                      "max-h-48": maxHeight === "md",
+                      "max-h-36": maxHeight === "rg",
+                      "max-h-28": maxHeight === "sm",
+                    })}
                  >
                    {filteredOptions ? (
                      filteredOptions.length > 0 ? (
@ -152,37 +145,31 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                          <Combobox.Option
                            key={option.value}
                            value={option.value}
-                            className={({ active, selected }) =>
-                              `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
-                                active || selected ? "bg-custom-background-80" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            className={({ active }) =>
+                              cn(
+                                "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
+                                {
+                                  "bg-custom-background-80": active,
                                }
+                              )
+                            }
+                            onClick={() => {
+                              if (!multiple) closeDropdown();
+                            }}
                          >
-                            {({ active, selected }) => (
+                            {({ selected }) => (
                              <>
-                                {option.content}
-                                {multiple ? (
-                                  <div
-                                    className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
-                                      active || selected ? "opacity-100" : "opacity-0"
-                                    }`}
-                                  >
-                                    <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                  </div>
-                                ) : (
-                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                )}
+                                <span className="flex-grow truncate">{option.content}</span>
+                                {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
                              </>
                            )}
                          </Combobox.Option>
                        ))
                      ) : (
-                        <span className="flex items-center gap-2 p-1">
-                          <p className="text-left text-custom-text-200 ">No matching results</p>
-                        </span>
+                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
                      )
                    ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
+                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
                    )}
                  </div>
                  {footerOption}
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Listbox } from "@headlessui/react";
+import { Check, ChevronDown } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Listbox } from "@headlessui/react";
-// icons
-import { Check, ChevronDown } from "lucide-react";
+// helpers
+import { cn } from "../../helpers";
 // types
 import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";

@ -28,7 +26,6 @@ const CustomSelect = (props: ICustomSelectProps) => {
    onChange,
    optionsClassName = "",
    value,
-    width = "auto",
    tabIndex,
  } = props;
  // states
@ -57,7 +54,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
      tabIndex={tabIndex}
      value={value}
      onChange={onChange}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
      onKeyDown={handleKeyDown}
      disabled={disabled}
    >
@ -94,24 +91,23 @@ const CustomSelect = (props: ICustomSelectProps) => {
        )}
      </>
      {isOpen && (
-        <Listbox.Options static>
+        <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
          <div
-            className={`z-10 my-1 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none ${
-              maxHeight === "lg"
-                ? "max-h-60"
-                : maxHeight === "md"
-                  ? "max-h-48"
-                  : maxHeight === "rg"
-                    ? "max-h-36"
-                    : maxHeight === "sm"
-                      ? "max-h-28"
-                      : ""
-            } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+            className={cn(
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              {
+                "max-h-60": maxHeight === "lg",
+                "max-h-48": maxHeight === "md",
+                "max-h-36": maxHeight === "rg",
+                "max-h-28": maxHeight === "sm",
+              },
+              optionsClassName
+            )}
            ref={setPopperElement}
            style={styles.popper}
            {...attributes.popper}
          >
-            <div className="space-y-1 p-2">{children}</div>
+            {children}
          </div>
        </Listbox.Options>
      )}
@ -124,16 +120,20 @@ const Option = (props: ICustomSelectItemProps) => {
  return (
    <Listbox.Option
      value={value}
-      className={({ active, selected }) =>
-        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-          active || selected ? "bg-custom-background-80" : ""
-        } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
+      className={({ active }) =>
+        cn(
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          {
+            "bg-custom-background-80": active,
+          },
+          className
+        )
      }
    >
      {({ selected }) => (
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">{children}</div>
-          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
        </div>
      )}
    </Listbox.Option>
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@ -13,7 +13,6 @@ export interface IDropdownProps {
  noChevron?: boolean;
  onOpen?: () => void;
  optionsClassName?: string;
-  width?: "auto" | string;
  placement?: Placement;
  tabIndex?: number;
 }
--- a/web/components/analytics/custom-analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@ -21,9 +21,9 @@ export const SelectProject: React.FC<Props> = observer((props) => {
      value: projectDetails?.id,
      query: `${projectDetails?.name} ${projectDetails?.identifier}`,
      content: (
-        <div className="flex items-center gap-2">
-          <span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span>
-          {projectDetails?.name}
+        <div className="flex items-center gap-2 truncate">
+          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
        </div>
      ),
    };
@ -42,7 +42,6 @@ export const SelectProject: React.FC<Props> = observer((props) => {
              .join(", ")
          : "All projects"
      }
-      optionsClassName="min-w-full max-w-[20rem]"
      multiple
    />
  );
--- a/web/components/analytics/custom-analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@ -28,7 +28,6 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
        </span>
      }
      onChange={onChange}
-      width="w-full"
      maxHeight="lg"
    >
      <CustomSelect.Option value={null}>No value</CustomSelect.Option>
--- a/web/components/analytics/custom-analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@ -24,7 +24,6 @@ export const SelectXAxis: React.FC<Props> = (props) => {
      value={value}
      label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
      onChange={onChange}
-      width="w-full"
      maxHeight="lg"
    >
      {ANALYTICS_X_AXIS_VALUES.map((item) => {
--- a/web/components/analytics/custom-analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@ -15,7 +15,7 @@ export const SelectYAxis: React.FC<Props> = ({ value, onChange }) => (
    value={value}
    label={<span>{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}</span>}
    onChange={onChange}
-    width="w-full"
+    maxHeight="lg"
  >
    {ANALYTICS_Y_AXIS_VALUES.map((item) => (
      <CustomSelect.Option key={item.value} value={item.value}>
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@ -79,7 +79,6 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                      handleChange({ archive_in: val });
                    }}
                    input
-                    width="w-full"
                    disabled={!isAdmin}
                  >
                    <>
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@ -106,7 +106,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                        handleChange({ close_in: val });
                      }}
                      input
-                      width="w-full"
                      disabled={!isAdmin}
                    >
                      <>
@ -161,7 +160,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                      }}
                      options={options}
                      disabled={!multipleOptions}
-                      width="w-full"
                      input
                    />
                  </div>
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@ -43,7 +43,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
        }`}
        target={activity.issue === null ? "_self" : "_blank"}
        rel={activity.issue === null ? "" : "noopener noreferrer"}
-        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
+        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline whitespace-nowrap"
      >
        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
        <span className="font-normal">{activity.issue_detail?.name}</span>
@ -123,7 +123,6 @@ const activityDetails: {
                to <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -136,7 +135,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -181,7 +179,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -197,7 +194,6 @@ const activityDetails: {
            of <IssueLink activity={activity} />
          </>
        )}
-        .
      </>
    ),
    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -214,7 +210,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -227,7 +222,6 @@ const activityDetails: {
                for <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -297,7 +291,6 @@ const activityDetails: {
                to <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else if (activity.verb === "updated")
@ -318,7 +311,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -339,7 +331,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -449,7 +440,6 @@ const activityDetails: {
            of <IssueLink activity={activity} />
          </>
        )}
-        .
      </>
    ),
    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -466,7 +456,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -479,7 +468,6 @@ const activityDetails: {
                for <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -498,7 +486,6 @@ const activityDetails: {
            for <IssueLink activity={activity} />
          </>
        )}
-        .
      </>
    ),
    icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -587,7 +574,6 @@ const activityDetails: {
            for <IssueLink activity={activity} />
          </>
        )}
-        .
      </>
    ),
    icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -604,7 +590,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -618,7 +603,6 @@ const activityDetails: {
                for <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
@ -636,7 +620,6 @@ const activityDetails: {
                from <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
      else
@ -650,7 +633,6 @@ const activityDetails: {
                for <IssueLink activity={activity} />
              </>
            )}
-            .
          </>
        );
    },
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@ -46,7 +46,6 @@ export const ThemeSwitch: FC<Props> = (props) => {
      }
      onChange={onChange}
      input
-      width="w-full z-20"
    >
      {THEME_OPTIONS.map((themeOption) => (
        <CustomSelect.Option key={themeOption.value} value={themeOption}>
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@ -246,7 +246,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
                    </button>
                  ))}
-                <CustomMenu width="auto" ellipsis className="z-10">
+                <CustomMenu ellipsis className="z-10">
                  {!isCompleted && isEditingAllowed && (
                    <>
                      <CustomMenu.MenuItem onClick={handleEditCycle}>
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -240,7 +240,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                </button>
              ))}

-            <CustomMenu width="auto" ellipsis>
+            <CustomMenu ellipsis>
              {!isCompleted && isEditingAllowed && (
                <>
                  <CustomMenu.MenuItem onClick={handleEditCycle}>
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@ -341,7 +341,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
              <LinkIcon className="h-3 w-3 text-custom-text-300" />
            </button>
            {!isCompleted && isEditingAllowed && (
-              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+              <CustomMenu placement="bottom-end" ellipsis>
                <CustomMenu.MenuItem
                  onClick={() => {
                    setTrackElement("CYCLE_PAGE_SIDEBAR");
--- a/web/components/dropdowns/cycle.tsx
+++ b/web/components/dropdowns/cycle.tsx
@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useCycle } from "hooks/store";
@ -14,21 +13,14 @@ import { ContrastIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { ICycle } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  onChange: (val: string | null) => void;
-  placement?: Placement;
  projectId: string;
  value: string | null;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -291,6 +283,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={closeDropdown}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@ -3,7 +3,6 @@ import { Popover } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
-// import "react-datepicker/dist/react-datepicker.css";
 // hooks
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@ -11,24 +10,17 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { renderFormattedDate } from "helpers/date-time.helper";
 import { cn } from "helpers/common.helper";
 // types
-import { TButtonVariants } from "./types";
-import { Placement } from "@popperjs/core";
+import { TDropdownProps } from "./types";

-type Props = {
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  disabled?: boolean;
+type Props = TDropdownProps & {
  icon?: React.ReactNode;
  isClearable?: boolean;
  minDate?: Date;
  maxDate?: Date;
  onChange: (val: Date | null) => void;
  placeholder: string;
-  placement?: Placement;
  value: Date | string | null;
  closeOnSelect?: boolean;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -118,6 +110,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
    buttonClassName = "",
    buttonContainerClassName,
    buttonVariant,
+    className = "",
    disabled = false,
    icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
    isClearable = true,
@ -160,9 +153,12 @@ export const DateDropdown: React.FC<Props> = (props) => {
  useOutsideClickDetector(dropdownRef, closeDropdown);

  return (
-    <Popover ref={dropdownRef} tabIndex={tabIndex} className="h-full flex-shrink-0" onKeyDown={handleKeyDown}>
-      {({ close }) => (
-        <>
+    <Popover
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full flex-shrink-0", className)}
+      onKeyDown={handleKeyDown}
+    >
      <Popover.Button as={React.Fragment}>
        <button
          ref={setReferenceElement}
@ -244,7 +240,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
              selected={value ? new Date(value) : null}
              onChange={(val) => {
                onChange(val);
-                    if (closeOnSelect) close();
+                if (closeOnSelect) closeDropdown();
              }}
              dateFormat="dd-MM-yyyy"
              minDate={minDate}
@ -255,8 +251,6 @@ export const DateDropdown: React.FC<Props> = (props) => {
          </div>
        </Popover.Panel>
      )}
-        </>
-      )}
    </Popover>
  );
 };
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 import sortBy from "lodash/sortBy";
 // hooks
@ -12,21 +11,14 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  onChange: (val: number | null) => void;
-  placement?: Placement;
  projectId: string;
  value: number | null;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -280,6 +272,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={closeDropdown}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/member/project-member.tsx
+++ b/web/components/dropdowns/member/project-member.tsx
@ -217,6 +217,9 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={() => {
+                        if (!multiple) closeDropdown();
+                      }}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/member/types.d.ts
+++ b/web/components/dropdowns/member/types.d.ts
@ -1,17 +1,9 @@
-import { Placement } from "@popperjs/core";
-import { TButtonVariants } from "../types";
+import { TDropdownProps } from "../types";

-export type MemberDropdownProps = {
+export type MemberDropdownProps = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  placeholder?: string;
-  placement?: Placement;
-  tabIndex?: number;
 } & (
    | {
        multiple: false;
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ b/web/components/dropdowns/member/workspace-member.tsx
@ -1,4 +1,4 @@
-import { Fragment, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@ -13,6 +13,8 @@ import { Avatar } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { MemberDropdownProps } from "./types";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";

 export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
  const {
@ -28,9 +30,13 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
    placeholder = "Members",
    placement,
    value,
+    tabIndex,
  } = props;
  // states
  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
  // popper-js refs
  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -78,13 +84,24 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
  };
  if (multiple) comboboxProps.multiple = true;

+  const openDropdown = () => {
+    setIsOpen(true);
+    if (referenceElement) referenceElement.focus();
+  };
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
+
  return (
    <Combobox
      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
      className={cn("h-full flex-shrink-0", {
        className,
      })}
      {...comboboxProps}
+      handleKeyDown={handleKeyDown}
    >
      <Combobox.Button as={Fragment}>
        {button ? (
@ -186,6 +203,9 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                        active ? "bg-custom-background-80" : ""
                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                    }
+                    onClick={() => {
+                      if (!multiple) closeDropdown();
+                    }}
                  >
                    {({ selected }) => (
                      <>
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useModule } from "hooks/store";
@ -14,21 +13,14 @@ import { DiceIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { IModule } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  onChange: (val: string | null) => void;
-  placement?: Placement;
  projectId: string;
  value: string | null;
-  tabIndex?: number;
 };

 type DropdownOptions =
@ -186,9 +178,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
      as="div"
      ref={dropdownRef}
      tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
-        className,
-      })}
+      className={cn("h-full flex-shrink-0", className)}
      value={value}
      onChange={onChange}
      disabled={disabled}
@ -291,6 +281,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={closeDropdown}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@ -1,7 +1,6 @@
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
@ -12,23 +11,17 @@ import { PriorityIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { TIssuePriorities } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";
 // constants
 import { ISSUE_PRIORITIES } from "constants/issue";
+import { useTheme } from "next-themes";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  highlightUrgent?: boolean;
  onChange: (val: TIssuePriorities) => void;
-  placement?: Placement;
  value: TIssuePriorities;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -236,43 +229,20 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
      },
    ],
  });
+  // next-themes
+  // TODO: remove this after new theming implementation
+  const { resolvedTheme } = useTheme();

-  const options = ISSUE_PRIORITIES.map((priority) => {
-    const priorityClasses = {
-      urgent: "bg-red-500/20 text-red-950 border-red-500",
-      high: "bg-orange-500/20 text-orange-950 border-orange-500",
-      medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
-      low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
-      none: "bg-custom-background-80 border-custom-border-300",
-    };
-
-    return {
+  const options = ISSUE_PRIORITIES.map((priority) => ({
    value: priority.key,
    query: priority.key,
    content: (
      <div className="flex items-center gap-2">
-          <div
-            className={cn("grid place-items-center border rounded p-0.5 flex-shrink-0", priorityClasses[priority.key], {
-              "bg-red-500 border-red-500": priority.key === "urgent" && highlightUrgent,
-            })}
-          >
-            <PriorityIcon
-              priority={priority.key}
-              size={14}
-              className={cn({
-                "text-white": priority.key === "urgent" && highlightUrgent,
-                // centre align the icons if text is hidden
-                "translate-x-[0.0625rem]": priority.key === "high",
-                "translate-x-0.5": priority.key === "medium",
-                "translate-x-1": priority.key === "low",
-              })}
-            />
-          </div>
+        <PriorityIcon priority={priority.key} size={14} withContainer />
        <span className="flex-grow truncate">{priority.title}</span>
      </div>
    ),
-    };
-  });
+  }));

  const filteredOptions =
    query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
@ -325,14 +295,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
            {buttonVariant === "border-with-text" ? (
              <BorderButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
              />
            ) : buttonVariant === "border-without-text" ? (
              <BorderButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
                hideText
@ -340,14 +314,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
            ) : buttonVariant === "background-with-text" ? (
              <BackgroundButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
              />
            ) : buttonVariant === "background-without-text" ? (
              <BackgroundButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
                hideText
@ -355,14 +333,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
            ) : buttonVariant === "transparent-with-text" ? (
              <TransparentButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
              />
            ) : buttonVariant === "transparent-without-text" ? (
              <TransparentButton
                priority={value}
-                className={buttonClassName}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
                highlightUrgent={highlightUrgent}
                dropdownArrow={dropdownArrow && !disabled}
                hideText
@ -400,6 +382,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                        active ? "bg-custom-background-80" : ""
                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                    }
+                    onClick={closeDropdown}
                  >
                    {({ selected }) => (
                      <>
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@ -2,7 +2,6 @@ import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useProject } from "hooks/store";
@ -13,20 +12,13 @@ import { cn } from "helpers/common.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IProject } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  onChange: (val: string) => void;
-  placement?: Placement;
  value: string | null;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -166,9 +158,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
      as="div"
      ref={dropdownRef}
      tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
-        className,
-      })}
+      className={cn("h-full flex-shrink-0", className)}
      value={value}
      onChange={onChange}
      disabled={disabled}
@ -271,6 +261,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={closeDropdown}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useProjectState } from "hooks/store";
@ -14,21 +13,14 @@ import { StateGroupIcon } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { IState } from "@plane/types";
-import { TButtonVariants } from "./types";
+import { TDropdownProps } from "./types";

-type Props = {
+type Props = TDropdownProps & {
  button?: ReactNode;
-  buttonClassName?: string;
-  buttonContainerClassName?: string;
-  buttonVariant: TButtonVariants;
-  className?: string;
-  disabled?: boolean;
  dropdownArrow?: boolean;
  onChange: (val: string) => void;
-  placement?: Placement;
  projectId: string;
  value: string;
-  tabIndex?: number;
 };

 type ButtonProps = {
@ -159,9 +151,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
      as="div"
      ref={dropdownRef}
      tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
-        className,
-      })}
+      className={cn("h-full flex-shrink-0", className)}
      value={value}
      onChange={onChange}
      disabled={disabled}
@ -264,6 +254,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                          active ? "bg-custom-background-80" : ""
                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                      }
+                      onClick={closeDropdown}
                    >
                      {({ selected }) => (
                        <>
--- a/web/components/dropdowns/types.d.ts
+++ b/web/components/dropdowns/types.d.ts
@ -1,3 +1,5 @@
+import { Placement } from "@popperjs/core";
+
 export type TButtonVariants =
  | "border-with-text"
  | "border-without-text"
@ -5,3 +7,13 @@ export type TButtonVariants =
  | "background-without-text"
  | "transparent-with-text"
  | "transparent-without-text";
+
+export type TDropdownProps = {
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonVariant: TButtonVariants;
+  className?: string;
+  disabled?: boolean;
+  placement?: Placement;
+  tabIndex?: number;
+};
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -180,7 +180,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                    </>
                  }
                  className="ml-1.5 flex-shrink-0"
-                  width="auto"
                  placement="bottom-start"
                >
                  {currentProjectCycleIds?.map((cycleId) => (
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -183,7 +183,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                    </>
                  }
                  className="ml-1.5 flex-shrink-0"
-                  width="auto"
                  placement="bottom-start"
                >
                  {projectModuleIds?.map((moduleId) => (
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@ -161,7 +161,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
              <CustomSelect
                value={value}
                input
-                width="w-full"
                onChange={onChange}
                label={
                  <span>
@ -172,6 +171,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                    )}
                  </span>
                }
+                optionsClassName="w-full"
              >
                {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
                  workspaceProjectIds.map((projectId) => {
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@ -82,7 +82,7 @@ export const JiraImportUsers: FC = () => {
                        input
                        value={value}
                        onChange={onChange}
-                        width="w-full"
+                        optionsClassName="w-full"
                        label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
                      >
                        <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
--- a/web/components/issues/issue-detail/cycle-select.tsx
+++ b/web/components/issues/issue-detail/cycle-select.tsx
@ -93,7 +93,6 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
            </Tooltip>
          </div>
        }
-        width="max-w-[10rem]"
        noChevron
        disabled={disableSelect}
      />
--- a/web/components/issues/issue-detail/module-select.tsx
+++ b/web/components/issues/issue-detail/module-select.tsx
@ -93,7 +93,6 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
            </Tooltip>
          </div>
        }
-        width="max-w-[10rem]"
        noChevron
        disabled={disableSelect}
      />
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@ -135,7 +135,6 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
        {!disableIssueCreation &&
          (renderExistingIssueModal ? (
            <CustomMenu
-              width="auto"
              customButton={
                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
                  <Plus height={14} width={14} strokeWidth={2} />
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -73,7 +73,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
          {!issue?.tempId ? (
            <>
              <IssueProperties
-                className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap"
+                className="relative flex items-center gap-2 whitespace-nowrap"
                issue={issue}
                isReadOnly={!canEditIssueProperties}
                handleIssues={updateIssue}
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@ -70,7 +70,6 @@ export const HeaderGroupByCard = observer(
          {!disableIssueCreation &&
            (renderExistingIssueModal ? (
              <CustomMenu
-                width="auto"
                customButton={
                  <span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
                    <Plus className="h-3.5 w-3.5" strokeWidth={2} />
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@ -62,7 +62,6 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
          </div>
        </div>
      }
-      width="xl"
      placement="bottom-end"
    >
      <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
--- a/web/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/components/issues/sub-issues/issue-list-item.tsx
@ -134,7 +134,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
          </div>

          <div className="flex-shrink-0 text-sm">
-            <CustomMenu width="auto" placement="bottom-end" ellipsis>
+            <CustomMenu placement="bottom-end" ellipsis>
              {disabled && (
                <CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, issue)}>
                  <div className="flex items-center gap-2">
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@ -42,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
      maxHeight="md"
      noChevron
      disabled={disabled}
-      width="w-full min-w-[8rem]"
+      optionsClassName="w-full"
    >
      <CustomSelect.Option value={null}>
        <>
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@ -232,7 +232,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                    </button>
                  ))}

-                <CustomMenu width="auto" ellipsis className="z-10">
+                <CustomMenu ellipsis className="z-10">
                  {isEditingAllowed && (
                    <>
                      <CustomMenu.MenuItem onClick={handleEditModule}>
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@ -209,7 +209,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                </button>
              ))}

-            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+            <CustomMenu verticalEllipsis buttonClassName="z-[1]">
              {isEditingAllowed && (
                <>
                  <CustomMenu.MenuItem onClick={handleEditModule}>
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@ -291,7 +291,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
              <LinkIcon className="h-3 w-3 text-custom-text-300" />
            </button>
            {isEditingAllowed && (
-              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+              <CustomMenu placement="bottom-end" ellipsis>
                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                  <span className="flex items-center justify-start gap-2">
                    <Trash2 className="h-3 w-3" />
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@ -200,7 +200,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                )}
                              </div>
                            }
-                            width="w-full"
+                            optionsClassName="w-full"
                            input
                          >
                            <div className="mb-2 flex h-9 w-full overflow-hidden rounded">
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@ -235,7 +235,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                >
                  <AlertCircle className="h-3.5 w-3.5" />
                </Tooltip>
-                <CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
+                <CustomMenu placement="bottom-end" className="!-m-1" verticalEllipsis>
                  {archived_at ? (
                    <>
                      {userCanArchive && (
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@ -69,7 +69,6 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
        ]
      }
      maxHeight="md"
-      width="w-full"
      onChange={onChange}
      disabled={isDisabled}
    />
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@ -236,7 +236,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                      onChange(val);
                                    }}
                                    options={options}
-                                    width="w-full min-w-[12rem]"
+                                    optionsClassName="w-full"
                                  />
                                );
                              }}
@ -266,7 +266,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                      </div>
                                    }
                                    input
-                                    width="w-full"
+                                    optionsClassName="w-full"
                                  >
                                    {Object.entries(ROLE).map(([key, label]) => {
                                      if (parseInt(key) > (currentProjectRole ?? EUserProjectRoles.GUEST)) return null;
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@ -160,7 +160,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
                              value={value}
                              label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
                              onChange={onChange}
-                              width="w-full"
+                              optionsClassName="w-full"
                              input
                            >
                              {Object.keys(GROUP_CHOICES).map((key) => (
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@ -123,7 +123,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
                      </button>
                    ))}

-                  <CustomMenu width="auto" ellipsis>
+                  <CustomMenu ellipsis>
                    {isEditingAllowed && (
                      <>
                        <CustomMenu.MenuItem
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@ -201,7 +201,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                  }
                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                  input
-                  width="w-full"
+                  optionsClassName="w-full"
                >
                  {ORGANIZATION_SIZE.map((item) => (
                    <CustomSelect.Option key={item} value={item}>
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@ -165,7 +165,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                                  value={value}
                                  label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
                                  onChange={onChange}
-                                  width="w-full"
+                                  optionsClassName="w-full"
                                  input
                                >
                                  {Object.entries(ROLE).map(([key, value]) => {
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@ -247,7 +247,7 @@ export const WorkspaceDetails: FC = observer(() => {
                    value={value}
                    onChange={onChange}
                    label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
-                    width="w-full"
+                    optionsClassName="w-full"
                    buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                    input
                    disabled={!isAdmin}
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@ -54,7 +54,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                  <p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
                  </p>
-                  <CustomMenu width="auto" ellipsis>
+                  <CustomMenu ellipsis>
                    <CustomMenu.MenuItem
                      onClick={(e) => {
                        e.preventDefault();
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@ -284,7 +284,9 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                      ref={ref}
                      hasError={Boolean(errors.email)}
                      placeholder="Enter your email"
-                      className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${errors.email ? "border-red-500" : ""}`}
+                      className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${
+                        errors.email ? "border-red-500" : ""
+                      }`}
                      disabled
                    />
                  )}
@ -306,7 +308,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                      label={value ? value.toString() : "Select your role"}
                      buttonClassName={errors.role ? "border-red-500" : "border-none"}
                      className="rounded-md border-[0.5px] !border-custom-border-200"
-                      width="w-full"
+                      optionsClassName="w-full"
                      input
                    >
                      {USER_ROLES.map((item) => (