Fixes UI Bug Issue in Symptom Editor (#9270)

ohcnetwork · Dec 17, 2024 · 9ac5225 · 9ac5225
1 parent 927c399
commit 9ac5225
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         )}