UI Updates & Bill Entering

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -3,6 +3,7 @@ import { Form } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
 import { Prompt, useLocation } from "react-router-dom";
+import "./form-fields-changed.styles.scss";
 
 export default function FormsFieldChanged({ form }) {
   const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
     form.resetFields();
   };
   const loc = useLocation();
-  if (!form.isFieldsTouched()) return <></>;
+  //if (!form.isFieldsTouched()) return <></>;
   return (
-    <Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
+    <Form.Item
+      className="form-fields-changed"
+      shouldUpdate
+      style={{ margin: 0, padding: 0, minHeight: "unset" }}
+    >
       {() => {
         if (form.isFieldsTouched())
           return (
-            <div>
+            <span>
               <Prompt
                 when={true}
                 message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
                   </div>
                 }
               />
-            </div>
+            </span>
           );
         return <div style={{ display: "none" }}></div>;
       }}

client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss

@@ -0,0 +1,7 @@
+.form-fields-changed {
+  .ant-form-item-control {
+    .ant-form-item-control-input {
+      min-height: unset !important;
+    }
+  }
+}