Fixes alignment of "Year of Birth" text in patient registration form (#…

…7694) * fixes #7692 * fix out of focus issue
ohcnetwork · Apr 24, 2024 · 218092b · 218092b
1 parent aee0050
commit 218092b
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
@@ -1383,16 +1383,21 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                       {...field("age")}
                                       errorClassName="hidden"
                                       trailing={
-                                        <p className="absolute right-16 mb-11 text-xs text-gray-700 sm:text-sm">
-                                          <p className="hidden sm:inline min-[768px]:hidden lg:inline">
-                                            {field("age").value !== "" &&
-                                              "Year of Birth:"}
-                                          </p>
-                                          <span className="font-bold">
-                                            {field("age").value !== "" &&
-                                              new Date().getFullYear() -
-                                                field("age").value}
-                                          </span>
+                                        <p className="relative right-4 space-x-1 text-xs text-gray-700 sm:right-14 sm:text-sm md:right-4 lg:right-14">
+                                          {field("age").value !== "" && (
+                                            <>
+                                              <span className="hidden sm:inline md:hidden lg:inline">
+                                                Year of Birth:
+                                              </span>
+                                              <span className="inline sm:hidden md:inline lg:hidden">
+                                                YOB:
+                                              </span>
+                                              <span className="font-bold">
+                                                {new Date().getFullYear() -
+                                                  field("age").value}
+                                              </span>
+                                            </>
+                                          )}
                                         </p>
                                       }
                                       placeholder="Enter the age"