[Page Headder]Fix reponsiveness for dashboards & visualization app he…

…aders (#8329) Signed-off-by: Zhongnan Su <[email protected]>
opensearch-project · Sep 26, 2024 · 8db6a16 · 8db6a16
1 parent ee9785c
commit 8db6a16
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -328,7 +328,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
         : datePicker}
       {renderQueryEditor()}
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false} gutterSize="none" direction="column">
+        <EuiFlexGroup responsive={false} gutterSize="s" direction="column">
           <EuiFlexItem>{renderSharingMetaFields()}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -10,16 +10,18 @@
  */
 
 .osdQueryBar__wrap {
-  max-width: 100%;
-  z-index: $euiZContentMenu;
-
   .euiToolTipAnchor {
     height: 100%;
   }
 
   &.euiFormControlLayout--group.euiFormControlLayout--compressed {
     overflow: initial;
   }
+
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
+    max-width: 100%;
+    z-index: $euiZContentMenu;
+  }
 }
 
 // Uses the append style, but no bordering

diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -265,7 +265,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
 
     return (
       <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
-        <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">
+        <EuiFlexGroup responsive={false} gutterSize="s" justifyContent="flexStart">
           {renderDatePicker()}
           <EuiFlexItem grow={false}>{button}</EuiFlexItem>
         </EuiFlexGroup>
@@ -306,7 +306,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
     });
 
     return (
-      <EuiFlexItem className={wrapperClasses}>
+      <EuiFlexItem className={wrapperClasses} grow={false}>
         <EuiSuperDatePicker
           start={props.dateRangeFrom}
           end={props.dateRangeTo}