From 0ffd2abc4c58fe4f2e885ab96c150574d2fed0e0 Mon Sep 17 00:00:00 2001
From: Ashwin P Chandran <ashwinpc@amazon.com>
Date: Wed, 4 Oct 2023 01:13:40 -0700
Subject: [PATCH] Fixes mobile layout (#5195)

Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
---
 .../config/global_selectors.json              |  3 +-
 .../config/restricted_properties.json         |  4 +--
 .../public/components/app_container.scss      |  5 +++
 .../components/sidebar/discover_field.scss    | 16 +++++-----
 .../components/sidebar/discover_field.tsx     |  2 +-
 .../components/sidebar/discover_sidebar.scss  |  5 +++
 .../canvas/discover_canvas.scss               | 31 +++++++++++++++++++
 7 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json
index d89561a04cb..ef2ec5f9252 100644
--- 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"
     ]
   }
 }
\ No newline at end of file
diff --git a/packages/osd-stylelint-config/config/restricted_properties.json b/packages/osd-stylelint-config/config/restricted_properties.json
index d229764c8d8..5b126232820 100644
--- 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"
     ]
   }
 }
\ No newline at end of file
diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss
index d289e7d4be3..d5b6df03820 100644
--- 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
index 5512136431b..39cacdcd0c9 100644
--- 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
index a924191c88f..b7aa9cf7b36 100644
--- 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
index 63e8720f2c5..7b1d1e2a82e 100644
--- 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
index e1a21bcf201..92e1131a05e 100644
--- 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;
+        }
+      }
+    }
+  }
+}