[8.x] [Stateful sidenav] Fix side nav panel clipping (elastic#194268) (…

…elastic#194318)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Stateful sidenav] Fix side nav panel clipping
(elastic#194268)](elastic#194268)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sébastien
Loix","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-27T15:37:36Z","message":"[Stateful
sidenav] Fix side nav panel clipping
(elastic#194268)","sha":"c01de8cf4db64d91c42f0170587f5f648c26fb3f","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","Feature:Chrome"],"title":"[Stateful
sidenav] Fix side nav panel
clipping","number":194268,"url":"https://github.com/elastic/kibana/pull/194268","mergeCommit":{"message":"[Stateful
sidenav] Fix side nav panel clipping
(elastic#194268)","sha":"c01de8cf4db64d91c42f0170587f5f648c26fb3f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194268","number":194268,"mergeCommit":{"message":"[Stateful
sidenav] Fix side nav panel clipping
(elastic#194268)","sha":"c01de8cf4db64d91c42f0170587f5f648c26fb3f"}}]}]
BACKPORT-->

Co-authored-by: Sébastien Loix <[email protected]>

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

@@ -17,6 +17,8 @@ interface Props {
   isSideNavCollapsed$: Observable<boolean>;
 }
 
+const PANEL_WIDTH = 290;
+
 export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
   children,
   isSideNavCollapsed$,
@@ -29,11 +31,10 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
       data-test-subj="projectLayoutSideNav"
       isCollapsed={isCollapsed}
       onCollapseToggle={toggleSideNav}
-      css={
-        isCollapsed
-          ? undefined
-          : { overflow: 'visible', clipPath: 'polygon(0 0, 300% 0, 300% 100%, 0 100%)' }
-      }
+      css={{
+        overflow: 'visible',
+        clipPath: `polygon(0 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 100%, 0 100%)`,
+      }}
     >
       {children}
     </EuiCollapsibleNavBeta>