[Serverless/Chrome] App menu bar fixes#162002
Conversation
c7c01ad to
6a3d794
Compare
...k/plugins/security_solution_serverless/public/navigation/side_navigation/side_navigation.tsx
Outdated
Show resolved
Hide resolved
x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.styles.ts
Outdated
Show resolved
Hide resolved
|
I'm finding a lot of slowdown when experimenting with style changes in |
5d81795 to
0ac609d
Compare
b21d97c to
a5222e4
Compare
4316977 to
a5c2189
Compare
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
|
Hi @tsullivan , 
To fix this, you just need to revert the change you made the last time (f82588b). See below for a quick git patch you can apply to your PR. GIT patch with fixApply this git patch to fix the issue: Index: x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx
--- a/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx (revision d0330d2191c987cb00c1aff062b0c7c0834ea2ae)
+++ b/x-pack/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx (date 1691589306484)
@@ -89,6 +89,17 @@
body.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME} {
${FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET}
}
+
+ //-------------------------------------------------------------------------------------------
+ // Style overrides for when Page Overlay is displayed in serverless project
+ //-------------------------------------------------------------------------------------------
+ // With serverless, there is 1 less header displayed, thus the display of the page overlay
+ // need to be adjusted slightly so that it still display below the header
+ //-------------------------------------------------------------------------------------------
+ body.kbnBody.kbnBody--projectLayout:not(.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME}) .${PAGE_OVERLAY_CSS_CLASSNAME} {
+ top: ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation};
+ height: calc(100% - (${({ theme: { eui } }) => eui.euiHeaderHeightCompensation}));
+ }
`;
const setDocumentBodyOverlayIsVisible = () => {
Let me know if you have any questions. |
semd
left a comment
There was a problem hiding this comment.
Tested the Security side navigation locally. Everything looks great, the positioning has been fixed and all parts fit correctly in the layout. LGTM! 👍
@paul-tavares Thanks for the guidance! I have pushed ac44334. Apologies, but I am still not sure how to get a screenshot and show the result. Would you be able to take another look? |
paul-tavares
left a comment
There was a problem hiding this comment.
Security Solution Page Overlay component looks good now. Thank you.
I took another wack at using app.meny.bar.sticky.mp4Here was the change I was experimenting withdiff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
index 45fa1aec2eb..6aad187cc0a 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
@@ -11,13 +11,12 @@ import { css } from '@emotion/react';
import { MountPoint } from '@kbn/core-mount-utils-browser';
import React from 'react';
import { HeaderActionMenu } from '../header/header_action_menu';
-import { SIZE_COLLAPSED, SIZE_EXPANDED } from './navigation';
interface AppMenuBarProps {
isOpen: boolean;
headerActionMenuMounter: { mount: MountPoint<HTMLElement> | undefined };
}
-export const AppMenuBar = ({ isOpen, headerActionMenuMounter }: AppMenuBarProps) => {
+export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
const { euiTheme } = useEuiTheme();
return (
<EuiThemeProvider>
@@ -31,8 +30,6 @@ export const AppMenuBar = ({ isOpen, headerActionMenuMounter }: AppMenuBarProps)
justify-content: end;
align-items: center;
padding: ${euiTheme.size.s};
- /* span the width of the body content (viewport - width of side nav) */
- width: calc(100% - ${isOpen ? SIZE_EXPANDED : SIZE_COLLAPSED}px);
`}
>
<HeaderActionMenu mounter={headerActionMenuMounter} />
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
index de7c42e6b41..d8c061b26f4 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx
@@ -189,13 +189,7 @@ export const ProjectHeader = ({
<SkipToMainContent />
<HeaderTopBanner headerBanner$={observables.headerBanner$} />
- <header
- data-test-subj="kibanaProjectHeader"
- css={css`
- /* FIXME use a variable for the app bar height */
- margin-bottom: ${headerActionMenuMounter.mount ? 48 : 0}px;
- `}
- >
+ <header data-test-subj="kibanaProjectHeader">
<div id="globalHeaderBars" data-test-subj="headerGlobalNav" className="header__bars">
<EuiHeader position="fixed" className="header__firstBar">
<EuiHeaderSection grow={false}>
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
index 9e07c1154d2..c05e8c3c4b9 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
@@ -10,8 +10,8 @@ import React from 'react';
import { css } from '@emotion/react';
import { EuiCollapsibleNav, EuiCollapsibleNavProps, useIsWithinMinBreakpoint } from '@elastic/eui';
-export const SIZE_EXPANDED = 248;
-export const SIZE_COLLAPSED = 48;
+const SIZE_EXPANDED = 248;
+const SIZE_COLLAPSED = 48;
export interface ProjectNavigationProps {
isOpen: boolean;
diff --git a/src/core/public/styles/chrome/_project.scss b/src/core/public/styles/chrome/_project.scss
index 623a83fce60..a9c014b0de0 100644
--- a/src/core/public/styles/chrome/_project.scss
+++ b/src/core/public/styles/chrome/_project.scss
@@ -1,10 +1,9 @@
.kbnBody--projectLayout {
.header__actionMenu {
/* fixates the elements position in the viewport, removes the element from the flow of the page */
- position: fixed;
+ position: sticky;
/* position below the primary fixed EuiHeader in the viewport */
top: $euiHeaderHeightCompensation;
- height: $euiHeaderHeightCompensation;
/* use a high z-index since this component is part of the header */
z-index: $euiZHeader;
}
|
|
@patrykkopycinski I've removed you as a reviewer since Paul T. helped out. Thanks! |
| /* fixates the elements position in the viewport, removes the element from the flow of the page */ | ||
| position: sticky; | ||
| /* position below the primary fixed EuiHeader in the viewport */ | ||
| top: 48px; |
There was a problem hiding this comment.
NOTE: in the near future, there will be a variable that can replace this hardcoded 48px
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: cc @tsullivan |
ryankeairns
left a comment
There was a problem hiding this comment.
Addressed my nits, thanks!
Summary
Closes #161889
Closes #162935
This PR gives the correct look and feel to the app menu bar.
Testing
yarn es snapshotin a terminal paneyarn serverlessin another panebanners:placementtonullto turn off the header banner.Known issue: in some Observability project pages, the app menu bar may appear as an empty div. This is explained in the serverless project layout documentation:
Screenshots
Will not be updated past a5222e4
Checklist
Delete any items that are not applicable to this PR.