From 9ac5225a7d1b1f202c49a63f169893dea875e153 Mon Sep 17 00:00:00 2001
From: JavidSumra <112365664+JavidSumra@users.noreply.github.com>
Date: Tue, 17 Dec 2024 13:40:38 +0530
Subject: [PATCH] Fixes UI Bug Issue in Symptom Editor (#9270)

---
 src/components/Common/DateInputV2.tsx                     | 1 +
 .../Form/FormFields/AutocompleteMultiselect.tsx           | 8 +++++---
 src/components/Form/FormFields/DateFormField.tsx          | 5 ++++-
 src/components/Form/ModelCrudEditor.tsx                   | 2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/DateInputV2.tsx b/src/components/Common/DateInputV2.tsx
index 20027a004d2..8ca937aed72 100644
--- a/src/components/Common/DateInputV2.tsx
+++ b/src/components/Common/DateInputV2.tsx
@@ -331,6 +331,7 @@ const DateInputV2: React.FC<Props> = ({
                     data-scribe-ignore
                     className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
                     placeholder={placeholder ?? t("select_date")}
+                    title={placeholder}
                     value={value ? dayjs(value).format(dateFormat) : ""}
                   />
                   <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
diff --git a/src/components/Form/FormFields/AutocompleteMultiselect.tsx b/src/components/Form/FormFields/AutocompleteMultiselect.tsx
index 3c537dffa32..8dad2f3ff0d 100644
--- a/src/components/Form/FormFields/AutocompleteMultiselect.tsx
+++ b/src/components/Form/FormFields/AutocompleteMultiselect.tsx
@@ -171,16 +171,18 @@ export const AutocompleteMutliSelect = <T, V>(
             {!props.disabled && (
               <ComboboxButton
                 ref={comboButtonRef}
-                className="absolute inset-y-0 right-0 flex items-center pr-2"
+                className="absolute inset-y-0 right-0 flex items-center justify-center pr-2"
               >
-                <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
+                <div
+                  className={`relative flex items-center justify-center text-lg text-secondary-900 ${value.some((val: any) => val.option) ? "-top-5" : ""}`}
+                >
                   {props.isLoading ? (
                     <CareIcon icon="l-spinner" className="animate-spin" />
                   ) : (
                     <CareIcon
                       id="dropdown-toggle"
                       icon="l-angle-down"
-                      className="-mb-1.5"
+                      className="text-lg"
                     />
                   )}
                 </div>
diff --git a/src/components/Form/FormFields/DateFormField.tsx b/src/components/Form/FormFields/DateFormField.tsx
index e867c24dd51..a3d26fa5554 100644
--- a/src/components/Form/FormFields/DateFormField.tsx
+++ b/src/components/Form/FormFields/DateFormField.tsx
@@ -37,7 +37,10 @@ const DateFormField = (props: Props) => {
   return (
     <FormField field={field}>
       <DateInputV2
-        className={classNames(field.error && "border-red-500")}
+        className={classNames(
+          field.error && "border-red-500",
+          "mr-9 text-ellipsis",
+        )}
         containerClassName={props.containerClassName}
         id={field.id}
         name={field.name}
diff --git a/src/components/Form/ModelCrudEditor.tsx b/src/components/Form/ModelCrudEditor.tsx
index 209695be265..a20b07eb458 100644
--- a/src/components/Form/ModelCrudEditor.tsx
+++ b/src/components/Form/ModelCrudEditor.tsx
@@ -120,7 +120,7 @@ export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
             onClick={() => handleDelete(props.item.id)}
             className="w-full text-xl text-red-500 hover:text-red-700 disabled:grayscale md:w-auto"
           >
-            <CareIcon icon="l-times-circle" />{" "}
+            <CareIcon icon="l-times-circle" />
             <span className="text-sm md:hidden">{t("remove")}</span>
           </button>
         )}