fix: update osd to respect new oui breakpoints (opensearch-project#8320)

* fix: update osd to respect new oui breakpoints Signed-off-by: Viraj Sanghvi <virajs@amazon.com> * Changeset file for PR opensearch-project#8320 created/updated --------- Signed-off-by: Viraj Sanghvi <virajs@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
SuZhou-Joe · Sep 25, 2024 · d3b776d · d3b776d
1 parent d47d49c
commit d3b776d
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 14 deletions.
diff --git a/changelogs/fragments/8320.yml b/changelogs/fragments/8320.yml
@@ -0,0 +1,2 @@
+fix:
+- Update osd to respect new oui breakpoints ([#8320](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8320))
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -282,7 +282,7 @@ export function CollapsibleNav({
         ))}
 
         {/* Docking button only for larger screens that can support it*/}
-        <EuiShowFor sizes={['l', 'xl']}>
+        <EuiShowFor sizes={['l', 'xl', 'xxl', 'xxxl']}>
           <EuiCollapsibleNavGroup>
             <EuiListGroup flush>
               <EuiListGroupItem

diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -197,15 +197,15 @@ export function Header({
         },
         {
           items: [
-            <EuiShowFor sizes={['m', 'l', 'xl']}>
+            <EuiShowFor sizes={['m', 'l', 'xl', 'xxl', 'xxxl']}>
               <HeaderNavControls navControls$={observables.navControlsExpandedCenter$} />
             </EuiShowFor>,
           ],
           borders: 'none',
         },
         {
           items: [
-            <EuiHideFor sizes={['m', 'l', 'xl']}>
+            <EuiHideFor sizes={['m', 'l', 'xl', 'xxl', 'xxxl']}>
               <HeaderNavControls navControls$={observables.navControlsExpandedCenter$} />
             </EuiHideFor>,
             <HeaderNavControls navControls$={observables.navControlsExpandedRight$} />,

diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -122,7 +122,7 @@
 }
 
 // IE specific fix for the datepicker to not collapse
-@include euiBreakpoint("m", "l", "xl") {
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
   .osdQueryEditor__datePickerWrapper {
     max-width: 40vw;
     flex-grow: 0 !important;

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
@@ -72,7 +72,7 @@
 }
 
 // IE specific fix for the datepicker to not collapse
-@include euiBreakpoint("m", "l", "xl") {
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxl") {
   .osdQueryBar__datePickerWrapper {
     max-width: 40vw;
     flex-grow: 0 !important;

diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -45,7 +45,7 @@
     max-width: calc(75% - #{$euiSizeM * 2});
   }
 
-  @include euiBreakpoint("xl") {
+  @include euiBreakpoint("xl", "xxl", "xxxl") {
     max-width: calc(50% - #{$euiSizeM * 2});
   }
 }

diff --git a/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss b/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss
@@ -56,13 +56,13 @@
 
 .osdOverviewApps__item {
   .osdOverviewApps__group--primary & {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxl") {
       max-width: calc(50% - #{$euiSizeM * 2});
     }
   }
 
   .osdOverviewApps__group--secondary & {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       max-width: calc(25% - #{$euiSizeM * 2});
     }
   }
@@ -86,7 +86,7 @@
 }
 
 .osdOverviewMore__item {
-  @include euiBreakpoint("m", "l", "xl") {
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
     max-width: calc(33.3333% - #{$euiSizeM * 2});
   }
 }
@@ -101,13 +101,13 @@
 
 .osdOverviewSupplements--noNews .osdOverviewMore {
   h2 {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       text-align: center;
     }
   }
 
   .osdOverviewMore__content {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       justify-content: center;
     }
   }
@@ -129,7 +129,7 @@
 }
 
 .osdOverviewDataManage__item:not(:only-child) {
-  @include euiBreakpoint("m", "l", "xl") {
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
     flex: 0 0 calc(50% - #{$euiSizeM * 2});
   }
 }
diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss
@@ -22,7 +22,7 @@
     width: 100% !important;
   }
 
-  @include euiBreakpoint("l", "xl") {
+  @include euiBreakpoint("l", "xl", "xxl", "xxxl") {
     max-width: 75%;
   }
 }

diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss
@@ -33,7 +33,7 @@
     flex-grow: 0;
   }
 
-  @include euiBreakpoint("l", "xl") {
+  @include euiBreakpoint("l", "xl", "xxl", "xxxl") {
     @include flex-parent(1, 1, 1px);
     @include euiScrollBar;