Fixes UI Bug Issue in Symptom Editor

cypress/support/commands.ts

@@ -191,12 +191,10 @@ Cypress.Commands.add("selectRadioOption", (name: string, value: string) => {
 Cypress.Commands.add("clickAndTypeDate", (selector, date) => {
   cy.get(selector).scrollIntoView();
   cy.get(selector).click();
-  cy.get('[data-test-id="date-input"]:visible [data-time-input]').each((el) =>
+  cy.get('[id="date-input"]:visible [data-time-input]').each((el) =>
     cy.wrap(el).clear(),
   );
-  cy.get(`[data-test-id="date-input"]:visible [data-time-input="0"]`)
-    .click()
-    .type(date);
+  cy.get(`[id="date-input"]:visible [data-time-input="0"]`).click().type(date);
   cy.get("body").click(0, 0);
 });
 

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">

src/components/Common/DateTextInput.tsx

@@ -134,7 +134,7 @@ export default function DateTextInput(props: {
           e.target === e.currentTarget &&
           (value ? goToInput(allowTime ? 4 : 2) : goToInput(0))
         }
-        data-test-id="date-input"
+        id="date-input"
       >
         {Object.entries(editingText)
           .slice(0, allowTime ? 5 : 3)

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>

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}

src/components/Form/ModelCrudEditor.tsx

@@ -100,7 +100,7 @@ export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
     }, [item]);
 
     return (
-      <div className="flex w-full flex-col items-center gap-4 md:flex-row">
+      <div className="flex w-full flex-col gap-4 md:flex-row">
         {children(item, setItem, processing, errors)}
         {props.type === "creating" && (
           <ButtonV2
@@ -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>
         )}