[Workspace Chrome] Visual Improvements (elastic#245898)

## Summary

Update the look and feel of the Solution chrome.

Epic: elastic/kibana-team#2106

Includes elastic#245099

**Changes:**
| Area | Change
|-|-
| Navigation collapse button | <li>moved from the chrome header to the
navigation footer
| Application space, App menu bar | <li>globally consistent white
background (due to changes in EUI v110)<br><li>drop shadow
| Application space| <li>Spacing at the bottom and right sides between
the app content<br>Spacing when the navigation side panel shows
(conditionally)
| Global header background | <li>shaded

### Things to test
1. dark mode
2. the expanded/collapsed nav
3. secondary nav panel
4. embedded console button at the bottom of the screen (Elasticsearch
space)
5. high contrast mode

## Screenshots
**Before**

1. <img width="1835" height="1101" alt="image"
src="https://github.com/user-attachments/assets/75a1ded1-f102-42ec-bc7e-804c27b4455b"
/>
6. <img width="1835" height="1101" alt="image"
src="https://github.com/user-attachments/assets/5301dd03-4cdb-4cd3-8fba-517adfd26b29"
/>
7. <img width="1835" height="1101" alt="image"
src="https://github.com/user-attachments/assets/b69c176b-7a8a-4d1f-879f-970010381483"
/>

**After**
1. <img width="1836" height="1100" alt="image"
src="https://github.com/user-attachments/assets/7d2b9d75-ee83-4893-83f4-9a6561fd1e04"
/>
2. <img width="1835" height="1100" alt="image"
src="https://github.com/user-attachments/assets/ae70825b-a52c-43b5-867f-3efd02681c60"
/>
3. <img width="1835" height="1100" alt="image"
src="https://github.com/user-attachments/assets/177d896c-8e9b-4810-839c-934ea9c7a3a8"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] Audit all Kibana pages for consistency of stylistic changes
- ~~[ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~
- ~~[ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~~
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- ~~[ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~
- ~~[ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~~
- ~~[ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed~~
- ~~[ ] The PR description includes the appropriate Release Notes
section, and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~
- ~~[ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.~~

### Identify risks

~~Does this PR introduce any risks? For example, consider risks like
hard to test bugs, performance regression, potential of data loss.~~

~~Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.~~

- ~~[ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)~~
- ~~[ ] ...~~

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>
Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co>
Co-authored-by: ek-so <eksomail@gmail.com>
Co-authored-by: Kate Sosedova <36230123+ek-so@users.noreply.github.com>

Author: 7 people

src/core/packages/chrome/browser-internal/src/chrome_service.tsx

@@ -73,7 +73,6 @@ import { handleSystemColorModeChange } from './handle_system_colormode_change';
 import { AppMenuBar } from './ui/project/app_menu';
 import { GridLayoutProjectSideNav } from './ui/project/sidenav/grid_layout_sidenav';
 import { FixedLayoutProjectSideNav } from './ui/project/sidenav/fixed_layout_sidenav';
-import { SideNavCollapseButton } from './ui/project/sidenav/collapse_button';
 import type { NavigationProps } from './ui/project/sidenav/types';
 
 const IS_SIDENAV_COLLAPSED_KEY = 'core.chrome.isSideNavCollapsed';
@@ -422,6 +421,7 @@ export class ChromeService {
       dataTestSubj$: activeDataTestSubj$,
       isFeedbackBtnVisible$: this.isFeedbackBtnVisible$,
       feedbackUrlParams$,
+      onToggleCollapsed: setIsSideNavCollapsed,
     };
 
     const getProjectHeader = ({
@@ -471,19 +471,13 @@ export class ChromeService {
         kibanaVersion={injectedMetadata.getKibanaVersion()}
         prependBasePath={http.basePath.prepend}
       >
-        {includeSideNav ? (
+        {includeSideNav && (
           <Router history={application.history}>
             <FixedLayoutProjectSideNav
               isCollapsed$={this.isSideNavCollapsed$}
-              toggle={setIsSideNavCollapsed}
               navProps={navProps}
             />
           </Router>
-        ) : (
-          <SideNavCollapseButton
-            isCollapsed={this.isSideNavCollapsed$}
-            toggle={setIsSideNavCollapsed}
-          />
         )}
       </ProjectHeader>
     );

src/core/packages/chrome/browser-internal/src/ui/project/app_menu.tsx

@@ -37,7 +37,7 @@ const useAppMenuBarStyles = (euiTheme: UseEuiTheme['euiTheme']) =>
       justifyContent: 'end',
       alignItems: 'center',
       padding: `0 ${euiTheme.size.s}`,
-      background: euiTheme.colors.body,
+      background: euiTheme.colors.backgroundBasePlain,
       borderBottom: euiTheme.border.thin,
       marginBottom: `-${euiTheme.border.width.thin}`,
     };

src/core/packages/chrome/browser-internal/src/ui/project/header.tsx

@@ -52,18 +52,13 @@ const getHeaderCss = ({ size, colors }: EuiThemeComputed) => ({
       display: flex;
       align-items: center;
       justify-content: center;
-      min-width: 56px; /* 56 = 40 + 8 + 8 */
+      min-width: ${size.xxl};
       cursor: pointer;
     `,
     logo: css`
       min-width: 0; /* overrides min-width: 40px */
       padding: 0;
     `,
-    spinner: css`
-      position: relative;
-      left: 4px;
-      top: 2px;
-    `,
   },
   leftHeaderSection: css`
     // needed to enable breadcrumbs truncation
@@ -202,7 +197,7 @@ const Logo = ({
       {loadingCount === 0 ? (
         renderLogo()
       ) : (
-        <a onClick={navigateHome} href={fullHref} css={logoCss.spinner}>
+        <a onClick={navigateHome} href={fullHref}>
           <EuiLoadingSpinner
             size="l"
             aria-hidden={false}
@@ -231,8 +226,11 @@ export const ProjectHeader = ({
   const headerCss = getHeaderCss(euiTheme);
   const { logo: logoCss } = headerCss;
 
-  const topBarStyles = css`
+  const topBarStyles = () => css`
     box-shadow: none !important;
+    background-color: ${euiTheme.colors.backgroundTransparent};
+    border-bottom-color: ${euiTheme.colors.backgroundTransparent};
+    padding-inline: 4px 8px;
   `;
 
   return (

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/fixed_layout_sidenav.tsx

@@ -15,31 +15,23 @@ import type { BehaviorSubject } from 'rxjs';
 import { css, Global } from '@emotion/react';
 
 import { Navigation } from './navigation';
-import { SideNavCollapseButton } from './collapse_button';
 import type { NavigationProps } from './types';
 
 interface CollapsibleNavigationProps {
-  toggle: (isVisible: boolean) => void;
   isCollapsed$: BehaviorSubject<boolean>;
   navProps: NavigationProps;
 }
 
 export const FixedLayoutProjectSideNav: FunctionComponent<CollapsibleNavigationProps> = ({
-  toggle,
   isCollapsed$,
   navProps,
 }) => {
   const isCollapsed = useObservable(isCollapsed$, isCollapsed$.getValue());
 
   return (
-    <>
-      <SideNavCollapseButton isCollapsed={isCollapsed} toggle={toggle} />
-      <CollapsibleNavigationFlyout>
-        {({ setWidth }) => (
-          <Navigation {...navProps} isCollapsed={isCollapsed} setWidth={setWidth} />
-        )}
-      </CollapsibleNavigationFlyout>
-    </>
+    <CollapsibleNavigationFlyout>
+      {({ setWidth }) => <Navigation {...navProps} isCollapsed={isCollapsed} setWidth={setWidth} />}
+    </CollapsibleNavigationFlyout>
   );
 };
 

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/navigation/navigation.tsx

@@ -49,6 +49,9 @@ export interface ChromeNavigationProps {
   dataTestSubj$?: Observable<string | undefined>;
 
   feedbackUrlParams$: Observable<URLSearchParams | undefined>;
+
+  // collapse toggle callback
+  onToggleCollapsed: (isCollapsed: boolean) => void;
 }
 
 export const Navigation = (props: ChromeNavigationProps) => {
@@ -75,6 +78,7 @@ export const Navigation = (props: ChromeNavigationProps) => {
         }
         isCollapsed={props.isCollapsed}
         setWidth={props.setWidth}
+        onToggleCollapsed={props.onToggleCollapsed}
         activeItemId={activeItemId}
         data-test-subj={classnames(dataTestSubj, 'projectSideNav', 'projectSideNavV2')}
       />

src/core/packages/chrome/browser-internal/src/ui/project/sidenav/navigation/navigation_feedback_snippet.tsx

@@ -63,14 +63,17 @@ export const NavigationFeedbackSnippet = ({
   const { euiTheme } = useEuiTheme();
 
   return (
-    <FeedbackSnippet
+    <div
       css={css`
-        border-top: ${euiTheme.border.width.thin} ${euiTheme.colors.borderBaseSubdued} solid;
+        border-top: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBaseSubdued};
       `}
-      feedbackButtonMessage={feedbackButtonMessage}
-      feedbackSnippetId={feedbackSnippetId}
-      promptViewMessage={promptViewMessage}
-      surveyUrl={feedbackSurveyUrl}
-    />
+    >
+      <FeedbackSnippet
+        feedbackButtonMessage={feedbackButtonMessage}
+        feedbackSnippetId={feedbackSnippetId}
+        promptViewMessage={promptViewMessage}
+        surveyUrl={feedbackSurveyUrl}
+      />
+    </div>
   );
 };

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts

@@ -9,21 +9,45 @@
 
 import { css } from '@emotion/react';
 import { layoutVar, layoutLevels } from '@kbn/core-chrome-layout-constants';
+import { euiOverflowScroll, euiShadow } from '@elastic/eui';
+import { getHighContrastBorder } from '@kbn/core-chrome-layout-utils';
 import type { EmotionFn } from '../types';
 
-const root: EmotionFn = ({ euiTheme }) =>
+const root: EmotionFn = (useEuiTheme) =>
   css`
     grid-area: application;
-    height: 100%;
-    position: relative;
-    width: 100%;
+
+    height: calc(100% - ${layoutVar('application.marginBottom')});
+    width: calc(100% - ${layoutVar('application.marginRight')});
+    margin-bottom: ${layoutVar('application.marginBottom')};
+    margin-right: ${layoutVar('application.marginRight')};
+
     z-index: ${layoutLevels.content};
 
+    position: relative;
     display: flex;
     flex-direction: column;
 
+    background-color: ${useEuiTheme.euiTheme.colors.backgroundBasePlain};
+    border-radius: ${useEuiTheme.euiTheme.border.radius.medium};
+    border: ${getHighContrastBorder(useEuiTheme)};
+    ${euiShadow(useEuiTheme, 'xs', { border: 'none' })};
+
     &:focus-visible {
-      border: 2px solid ${euiTheme.colors.textParagraph};
+      border: 2px solid ${useEuiTheme.euiTheme.colors.textParagraph};
+    }
+
+    // only restrict overflow scroll on screen (not print) to allow for full page printing
+    @media screen {
+      ${euiOverflowScroll(useEuiTheme, { direction: 'y' })};
+      // reset the height back to respect the margin bottom
+      height: calc(100% - ${layoutVar('application.marginBottom')});
+
+      // Hide scrollbar
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Edge */
+      }
     }
   `;
 

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx

@@ -10,8 +10,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 
-import { css } from '@emotion/react';
-import { useEuiOverflowScroll } from '@elastic/eui';
 import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
 
 import { styles } from './layout_application.styles';
@@ -31,16 +29,9 @@ export const LayoutApplication = ({
   topBar?: ReactNode;
   bottomBar?: ReactNode;
 }) => {
-  // only restrict overflow scroll on screen (not print) to allow for full page printing
-  const overflow = css`
-    @media screen {
-      ${useEuiOverflowScroll('y')};
-    }
-  `;
-
   return (
     <div
-      css={[styles.root, overflow]}
+      css={styles.root}
       id={APP_MAIN_SCROLL_CONTAINER_ID}
       className="kbnChromeLayoutApplication"
       data-test-subj="kbnChromeLayoutApplication"

src/core/packages/chrome/layout/core-chrome-layout-components/layout.types.ts

@@ -23,6 +23,8 @@ export interface LayoutDimensions {
   sidebarWidth: number;
   applicationTopBarHeight: number;
   applicationBottomBarHeight: number;
+  applicationMarginBottom: number;
+  applicationMarginRight: number;
 }
 
 /**

src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx

@@ -24,6 +24,8 @@ export type LayoutConfig = Pick<
   | 'sidebarWidth'
   | 'applicationTopBarHeight'
   | 'applicationBottomBarHeight'
+  | 'applicationMarginBottom'
+  | 'applicationMarginRight'
 >;
 
 /**