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

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} />

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}

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} />

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)}>