Fixes mobile layout (#5195)

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Oct 4, 2023 · 0ffd2ab · 0ffd2ab
1 parent dc6a7ec
commit 0ffd2ab
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 12 deletions.
diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json
@@ -23,7 +23,8 @@
       "src/plugins/vis_builder/public/application/components/searchable_dropdown.scss",
       "src/plugins/vis_builder/public/application/components/side_nav.scss",
       "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
-      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss"
+      "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
+      "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss"
     ]
   }
 }
diff --git a/packages/osd-stylelint-config/config/restricted_properties.json b/packages/osd-stylelint-config/config/restricted_properties.json
@@ -2,7 +2,6 @@
   "font-family": {
     "explanation": "All \"font-family\" styles should be inherited from OUI themes and components. Remove the rule.",
     "approved": [
-      "src/plugins/discover_legacy/public/application/_discover.scss",
       "src/plugins/maps_legacy/public/map/_leaflet_overrides.scss",
       "src/plugins/maps_legacy/public/map/_legend.scss",
       "src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss",
@@ -12,8 +11,7 @@
       "src/plugins/data/public/ui/typeahead/_suggestion.scss",
       "src/plugins/vis_type_timeseries/public/application/components/_error.scss",
       "packages/osd-ui-framework/src/components/form/check_box/_check_box.scss",
-      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss",
-      "src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss"
+      "src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss"
     ]
   }
 }
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
@@ -3,6 +3,11 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 .deSidebar {
   max-width: 462px;
   min-width: 400px;
+
+  @include ouiBreakpoint("xs", "s", "m") {
+    max-width: initial;
+    width: 100%;
+  }
 }
 
 .deLayout {

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.scss b/src/plugins/discover/public/application/components/sidebar/discover_field.scss
@@ -3,16 +3,18 @@
   max-width: 300px;
 }
 
-.dscSidebarField__actionButton {
-  opacity: 0;
-  transition: opacity $ouiAnimSpeedExtraFast;
+.dscSidebarField {
+  &__actionButton {
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast;
 
-  &:hover,
-  &:focus {
-    opacity: 1;
+    @include ouiBreakpoint("xs", "s", "m") {
+      opacity: 1;
+    }
   }
 
-  @include ouiBreakpoint("xs", "s", "m") {
+  &:hover &__actionButton,
+  &:focus &__actionButton {
     opacity: 1;
   }
 }
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -195,7 +195,7 @@ export const DiscoverField = ({
   }
 
   return (
-    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} className="dscSidebarField">
       <EuiFlexItem grow={false}>
         <FieldIcon
           type={field.type}

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -1,3 +1,8 @@
 .dscSideBarFieldListHeader {
   padding-left: $euiSizeS;
 }
+
+.dscSidebar__item:hover,
+.dscSidebar__item:focus {
+  background-color: tintOrShade($euiColorPrimary, 90%, 90%);
+}
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss
@@ -1,5 +1,36 @@
 .dscCanvas {
   @include euiYScrollWithShadows;
 
+  /* stylelint-disable-next-line */
+  container-type: inline-size; // containment context
+  /* stylelint-disable-next-line */
+  container-name: canvas;
   height: 100%;
 }
+
+// TopNav styles for the Discover
+/* stylelint-disable-next-line */
+@container canvas (max-width: 900px) {
+  .globalQueryBar {
+    .osdQueryBar--withDatePicker {
+      flex-wrap: wrap;
+
+      & > .euiFlexItem {
+        width: 100% !important;
+
+        &:first-child {
+          order: 1;
+        }
+      }
+
+      .osdQueryBar__datePickerWrapper {
+        max-width: initial;
+        width: 100%;
+
+        .euiSuperDatePicker__flexWrapper {
+          width: auto;
+        }
+      }
+    }
+  }
+}