(Fix) UI Issue with Jumbled Search Results when PatientSearchBar Comp…

…onent is used in a workspace (#1257) * fix: ui bug that jumbles up ui on small windows * refactor: scope patient search bar rule to only searchBarWrapper * refactor: use carbon styling for height * fix: 50vw width on small windows --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Aug 2, 2024 · 120257c · 120257c
1 parent da907fc
commit 120257c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/esm-appointments-app/src/patient-search/patient-search.scss b/packages/esm-appointments-app/src/patient-search/patient-search.scss
@@ -6,18 +6,20 @@
   padding: spacing.$spacing-05;
 }
 
-[data-extension-id='patient-search-bar'] {
-  & > div {
-    width: 100%;
+.searchBarWrapper {
+  [data-extension-id='patient-search-bar'] {
+    & > div {
+      width: 100%;
 
-    & input {
-      background-color: $ui-02;
-      border-bottom: none;
-      min-height: spacing.$spacing-09;
-    }
+      & input {
+        background-color: $ui-02;
+        border-bottom: none;
+        min-height: spacing.$spacing-09;
+      }
 
-    & button {
-      height: spacing.$spacing-09;
+      & button {
+        height: spacing.$spacing-09;
+      }
     }
   }
 }
diff --git a/...s/esm-patient-search-app/src/compact-patient-search-extension/compact-patient-search.scss b/...s/esm-patient-search-app/src/compact-patient-search-extension/compact-patient-search.scss
@@ -4,7 +4,7 @@
 @import '../root.scss';
 
 .patientSearchBar {
-  width: 50vw;
+  width: 100%;
   position: relative;
 }