Merge pull request #2964 from ever-co/2949-task-settings--ui-align-el…

…ements-with-proper-size fix: aling elements with proper size on settings / Create new issue
ever-co · Aug 27, 2024 · 075d187 · 075d187
2 parents 1e30f3c + b336d48
commit 075d187
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
@@ -980,7 +980,8 @@ export function StatusDropdown<T extends TStatusItem>({
 					: 'bg-[#F2F2F2] ',
 				'dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]',
 				taskStatusClassName,
-				isVersion && 'dark:text-white'
+				isVersion && 'dark:text-white',
+				'h-full'
 			)}
 			titleClassName={clsxm(hasBtnIcon && ['whitespace-nowrap overflow-hidden max-w-[90%]'])}
 			isVersion={isVersion}
@@ -1002,7 +1003,7 @@ export function StatusDropdown<T extends TStatusItem>({
 	);
 
 	const dropdown = (
-		<Tooltip label={disabledReason} enabled={!enabled} placement="auto">
+		<Tooltip className="h-full" label={disabledReason} enabled={!enabled} placement="auto">
 			<div className={clsxm('relative', className)}>
 				<Listbox
 					value={value?.value || value?.name || (multiple ? [] : null)}

diff --git a/apps/web/lib/settings/task-statuses-form.tsx b/apps/web/lib/settings/task-statuses-form.tsx
@@ -138,8 +138,8 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 							</Text>
 						)}
 
-						<div className="flex flex-col items-center sm:items-start">
-							<div className="flex">
+						<div className="flex flex-col gap-2  items-center sm:items-start">
+							<div className="flex gap-2">
 								{!createNew && !edit && (
 									<Button
 										variant="outline"
@@ -153,7 +153,7 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 										{t('pages.settingsTeam.CREATE_NEW_STATUS')}
 									</Button>
 								)}
-								<Button onClick={openModal} variant="outline" className="mx-2 rounded-[10px]">
+								<Button onClick={openModal} variant="outline" className="rounded-[10px]">
 									Sort
 								</Button>
 							</div>
@@ -165,20 +165,20 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 									</Text>
 									<div
 										className={clsxm(
-											'flex w-full gap-x-5 items-stretch mt-3',
+											'flex w-full gap-x-5 items-center mt-3',
 											formOnly && ['flex-wrap space-y-2']
 										)}
 									>
 										<InputField
 											type="text"
 											placeholder={t('pages.settingsTeam.CREATE_NEW_STATUS')}
-											className="mb-0 min-w-[350px]"
-											wrapperClassName="mb-0 rounded-lg"
+											className="mb-0 w-full"
+											wrapperClassName="mb-0 rounded-lg flex-grow"
 											{...register('name')}
 										/>
 										<StandardTaskStatusDropDown
 											onValueChange={(status) => setValue('template', status)}
-											className="h-[53px] w-[265px]"
+											className=" h-14 shrink-0"
 										/>
 										<IconPopover
 											iconList={iconList}
@@ -192,6 +192,7 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 										<ColorPicker
 											defaultColor={edit ? edit.color : undefined}
 											onChange={(color) => setValue('color', color)}
+											className=" shrink-0"
 										/>
 									</div>
 									<div className="flex mt-5 gap-x-4">