(fix) UI fixes for vitals and biometrics form fields (#1884)

openmrs · Jun 28, 2024 · beba218 · beba218
1 parent b917f2f
commit beba218
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss b/packages/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-form.scss
@@ -25,6 +25,7 @@
 }
 
 .tablet {
+  margin: 0.5rem 0;
   padding: 1.5rem 1rem;
   background-color: $ui-02;
 }
@@ -56,7 +57,7 @@
   margin: 0.5rem 0rem 0rem;
   display: flex;
   flex-flow: row wrap;
-  gap: 1rem;
+  gap: 1rem 0.75rem;
 }
 
 .spacer {

diff --git a/...s/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx b/...s/esm-patient-vitals-app/src/vitals-biometrics-form/vitals-biometrics-input.component.tsx
@@ -25,11 +25,6 @@ type fieldId =
 type AbnormalValue = 'critically_low' | 'critically_high' | 'high' | 'low';
 type FieldTypes = 'number' | 'textarea';
 
-interface ResponsiveWrapperProps {
-  children: React.ReactNode;
-  isTablet: boolean;
-}
-
 interface VitalsAndBiometricsInputProps {
   control: Control<VitalsBiometricsFormData>;
   fieldStyles?: React.CSSProperties;
@@ -77,7 +72,6 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
   const [isFocused, setIsFocused] = useState(false);
 
   const abnormalValues: Array<AbnormalValue> = ['critically_low', 'critically_high', 'high', 'low'];
-
   const hasAbnormalValue = !isFocused && interpretation && abnormalValues.includes(interpretation as AbnormalValue);
 
   function checkValidity(value, onChange) {
@@ -126,7 +120,11 @@ const VitalsAndBiometricsInput: React.FC<VitalsAndBiometricsInputProps> = ({
           ) : null}
         </section>
         <section className={inputClasses} style={{ ...fieldStyles }}>
-          <div className={styles.centered}>
+          <div
+            className={classNames({
+              [styles.centered]: !isTablet || unitSymbol === 'mmHg',
+            })}
+          >
             {fieldProperties.map((fieldProperty) => {
               if (fieldProperty.type === 'number') {
                 const numberInputClasses = classNames(styles.numberInput, fieldProperty.className);