[7.x] [Design] A couple fixes for 7.10 (#78801) (#79016)

* [Design] A couple fixes for 7.10 (#78801) * A few header and KQL bar fixes * More fixes (alerts, modals) * Fixing bottom padding for advanced settings bottom bar * One more alerts responsive fix
elastic · Sep 30, 2020 · 6f953c0 · 6f953c0
1 parent 2dc34ac
commit 6f953c0
Show file tree

Hide file tree

Showing 12 changed files with 223 additions and 110 deletions.
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/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -22,7 +22,9 @@ import {
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,
+  EuiHideFor,
   EuiIcon,
+  EuiShowFor,
   htmlIdGenerator,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -117,12 +119,19 @@ export function Header({
               },
               {
                 ...(observables.navControlsCenter$ && {
-                  items: [<HeaderNavControls navControls$={observables.navControlsCenter$} />],
+                  items: [
+                    <EuiShowFor sizes={['m', 'l', 'xl']}>
+                      <HeaderNavControls navControls$={observables.navControlsCenter$} />
+                    </EuiShowFor>,
+                  ],
                 }),
                 borders: 'none',
               },
               {
                 items: [
+                  <EuiHideFor sizes={['m', 'l', 'xl']}>
+                    <HeaderNavControls navControls$={observables.navControlsCenter$} />
+                  </EuiHideFor>,
                   <HeaderHelpMenu
                     helpExtension$={observables.helpExtension$}
                     helpSupportUrl$={observables.helpSupportUrl$}
@@ -154,8 +163,6 @@ export function Header({
                 </EuiHeaderSectionItemButton>
               </EuiHeaderSectionItem>
 
-              <EuiHeaderSectionItem border="right" />
-
               <HeaderNavControls side="left" navControls$={observables.navControlsLeft$} />
             </EuiHeaderSection>
 

diff --git a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss b/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss
@@ -64,3 +64,7 @@
 .mgtAdvancedSettingsForm__button {
   width: 100%;
 }
+
+.kbnBody--mgtAdvancedSettingsHasBottomBar .mgtPage__body {
+  padding-bottom: $euiSizeXL * 2;
+}