ResultField & ResultHeader: Mobile responsiveness tweaks

cee-chen · Dec 7, 2020 · a2573bd · a2573bd
1 parent ed4528a
commit a2573bd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/...gins/enterprise_search/public/applications/app_search/components/result/result_field.scss b/...gins/enterprise_search/public/applications/app_search/components/result/result_field.scss
@@ -2,18 +2,24 @@
   font-size: $euiFontSizeS;
   line-height: $euiLineHeight;
   display: grid;
-  grid-template-columns: calc(35% + #{$euiSizeS * 7} ) $euiSize * 2 1fr;
+  grid-template-columns: 0.85fr $euiSizeXL 1fr;
   grid-gap: $euiSizeXS;
 
   &__separator {
+    text-align: center;
+
     &:after {
       content: '=>';
       color: $euiColorDarkShade;
     }
   }
 
   &__value {
-    padding-left: $euiSizeS;
+    padding-left: $euiSize;
     overflow: hidden;
+
+    @include euiBreakpoint('xs') {
+      padding-left: 0;
+    }
   }
 }
diff --git a/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss b/...ins/enterprise_search/public/applications/app_search/components/result/result_header.scss
@@ -4,13 +4,25 @@
   align-items: flex-start;
   margin-bottom: $euiSizeS;
 
+  @include euiBreakpoint('xs') {
+    flex-direction: column;
+  }
+
   &__column {
     display: flex;
     flex-wrap: wrap;
 
+    @include euiBreakpoint('xs') {
+      flex-direction: column;
+    }
+
     & + &,
     .appSearchResultHeaderItem + .appSearchResultHeaderItem {
       margin-left: $euiSizeL;
+
+      @include euiBreakpoint('xs') {
+        margin-left: 0;
+      }
     }
   }
 }