From 27c6fb8ab65c193b0f4530a9633f004faaf3ed52 Mon Sep 17 00:00:00 2001
From: Birusha Ndegeya <142086785+BirushaNdegeya@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:01:10 +0200
Subject: [PATCH] fix: task input dropdowns (#3152)

* fix: task input dropdowns

* refactor:  Implement Max-Height
---
 .../web/lib/features/auth-user-task-input.tsx | 96 +++++++++----------
 apps/web/lib/features/task/task-status.tsx    |  2 +-
 2 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/apps/web/lib/features/auth-user-task-input.tsx b/apps/web/lib/features/auth-user-task-input.tsx
index 343dff70b..70bfd69b4 100644
--- a/apps/web/lib/features/auth-user-task-input.tsx
+++ b/apps/web/lib/features/auth-user-task-input.tsx
@@ -7,63 +7,55 @@ import { useAtomValue } from 'jotai';
 import { TaskEstimate } from './task/task-estimate';
 import { TaskInput } from './task/task-input';
 import { TaskLabels } from './task/task-labels';
-import {
-  ActiveTaskPropertiesDropdown,
-  ActiveTaskSizesDropdown,
-  ActiveTaskStatusDropdown
-} from './task/task-status';
+import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown, ActiveTaskStatusDropdown } from './task/task-status';
 import { useTranslations } from 'next-intl';
 
 export function AuthUserTaskInput({ className }: IClassName) {
-  const t = useTranslations();
-  const activeTeamTask = useAtomValue(activeTeamTaskState);
-  const { isTrackingEnabled } = useOrganizationTeams();
+	const t = useTranslations();
+	const activeTeamTask = useAtomValue(activeTeamTaskState);
+	const { isTrackingEnabled } = useOrganizationTeams();
 
-  return (
-    <div
-      className={clsxm('flex-1 flex flex-col mr-10 lg:mt-0 mt-8', className)}
-    >
-      <TaskInput
-        fullWidthCombobox={true}
-        createOnEnterClick={true}
-        showTaskNumber={true}
-        autoAssignTaskAuth={isTrackingEnabled}
-      />
-      <div className="flex gap-5 flex-row lg:items-center justify-between ml-2">
-        <div className="xl:flex mb-4 lg:mb-0">
-          <span className="font-normal text-gray-500 pr-2">
-            {t('common.ESTIMATE')}:
-          </span>
-          <TaskEstimate />
-        </div>
+	return (
+		<div className={clsxm('flex-1 flex flex-col mr-10 lg:mt-0 mt-8', className)}>
+			<TaskInput
+				fullWidthCombobox={true}
+				createOnEnterClick={true}
+				showTaskNumber={true}
+				autoAssignTaskAuth={isTrackingEnabled}
+			/>
+			<div className="flex gap-5 flex-row lg:items-center justify-between ml-2">
+				<div className="xl:flex mb-4 lg:mb-0">
+					<span className="font-normal text-gray-500 pr-2">{t('common.ESTIMATE')}:</span>
+					<TaskEstimate />
+				</div>
 
-        <div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
-          <ActiveTaskStatusDropdown
-            className="lg:max-w-[190px] w-full"
-            disabled={!activeTeamTask}
-            taskStatusClassName="text-xs py-1.5 w-full"
-          />
+				<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
+					<ActiveTaskStatusDropdown
+						className="lg:max-w-[190px] w-full"
+						disabled={!activeTeamTask}
+						taskStatusClassName="text-xs py-1.5 w-full"
+					/>
 
-          <ActiveTaskPropertiesDropdown
-            className="lg:max-w-[190px] w-full"
-            disabled={!activeTeamTask}
-            taskStatusClassName="w-full py-1.5 text-xs"
-          />
+					<ActiveTaskPropertiesDropdown
+						className="lg:max-w-[190px] w-full"
+						disabled={!activeTeamTask}
+						taskStatusClassName="w-full py-1.5 text-xs"
+					/>
 
-          <ActiveTaskSizesDropdown
-            className="lg:max-w-[190px] w-full"
-            disabled={!activeTeamTask}
-            taskStatusClassName="w-full py-1.5 text-xs"
-          />
+					<ActiveTaskSizesDropdown
+						className="lg:max-w-[190px] w-full"
+						disabled={!activeTeamTask}
+						taskStatusClassName="w-full py-1.5 text-xs"
+					/>
 
-          <TaskLabels
-            task={activeTeamTask}
-            className="lg:max-w-[170px] w-full text-xs"
-            forDetails={false}
-            taskStatusClassName="dark:bg-[#1B1D22] dark:border py-[7px] dark:border-[#FFFFFF33] text-xs"
-          />
-        </div>
-        {/* <div className="grid justify-items-center md:hidden">
+					<TaskLabels
+						task={activeTeamTask}
+						className="lg:max-w-[170px] w-full text-xs"
+						forDetails={false}
+						taskStatusClassName="dark:bg-[#1B1D22] dark:border py-[7px] dark:border-[#FFFFFF33] text-xs"
+					/>
+				</div>
+				{/* <div className="grid justify-items-center md:hidden">
 					<div className="flex">
 						<ActiveTaskStatusDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
 						<ActiveTaskPropertiesDropdown className="w-32" disabled={!activeTeamTask} />
@@ -73,7 +65,7 @@ export function AuthUserTaskInput({ className }: IClassName) {
 						<TaskLabels task={activeTeamTask} className="lg:min-w-[170px]" forDetails={false} />
 					</div>
 				</div> */}
-      </div>
-    </div>
-  );
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index f79fc5ab6..538dd12f4 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -1075,7 +1075,7 @@ export function StatusDropdown<T extends TStatusItem>({
 									<Listbox.Options className="outline-none">
 										<Card
 											shadow="bigger"
-											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5"
+											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-scroll"
 										>
 											{items.map((item, i) => {
 												const item_value = item?.value || item?.name;