[9.0] Hide side-nav during report generation (elastic#234675) (elastic#234907)

# Backport

This will backport the following commits from `main` to `9.0`:
- [Hide side-nav during report generation
(elastic#234675)](elastic#234675)

<!--- Backport version: 10.0.2 -->

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

<!--BACKPORT [{"author":{"name":"Ersin
Erdal","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-09-12T12:34:27Z","message":"Hide
side-nav during report generation (elastic#234675)\n\nFixes: elastic#227187\n\nWhen we
request a report we send the target element's width and use it\nto
create a browser window.\nTherefore the element's width becomes the
window width. When the\nside-nav is visible on the page, it pushes the
dashboard to the right\nand makes it smaller. As we take only the target
element's screenshot\nand use the width we passed as param as image
width in the pdf, it\nbecomes skewed.\n\nThis PR removes the side-nav
from the page during the report generation.\nSo the dashboard uses the
full window width which is the original number\nwe passed
initially.\n\n## To verify:\n\nAdd `Sample web logs` data.\nChange the
solution view in the Space to something other than Classic.\nGo to
`Dashboards > Sample Logs Data` and generate a PDF report.\nThe
screenshot should not be skewed.\n\nAdd the below config to your
kibana.yml\n```\nfeature_flags.overrides:\n core.chrome.projectSideNav:
'v2'\n```\nGo to `Dashboards > Sample Logs Data` and generate a PDF
report.\nThe fix should be working with the new side-nav as
well.","sha":"fa3bcdfb907e1b7b8b451ccfa0dcd3a21c73bcc6","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:ResponseOps","v9.0.0","Team:SharedUX","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"Hide
side-nav during report
generation","number":234675,"url":"https://github.com/elastic/kibana/pull/234675","mergeCommit":{"message":"Hide
side-nav during report generation (elastic#234675)\n\nFixes: elastic#227187\n\nWhen we
request a report we send the target element's width and use it\nto
create a browser window.\nTherefore the element's width becomes the
window width. When the\nside-nav is visible on the page, it pushes the
dashboard to the right\nand makes it smaller. As we take only the target
element's screenshot\nand use the width we passed as param as image
width in the pdf, it\nbecomes skewed.\n\nThis PR removes the side-nav
from the page during the report generation.\nSo the dashboard uses the
full window width which is the original number\nwe passed
initially.\n\n## To verify:\n\nAdd `Sample web logs` data.\nChange the
solution view in the Space to something other than Classic.\nGo to
`Dashboards > Sample Logs Data` and generate a PDF report.\nThe
screenshot should not be skewed.\n\nAdd the below config to your
kibana.yml\n```\nfeature_flags.overrides:\n core.chrome.projectSideNav:
'v2'\n```\nGo to `Dashboards > Sample Logs Data` and generate a PDF
report.\nThe fix should be working with the new side-nav as
well.","sha":"fa3bcdfb907e1b7b8b451ccfa0dcd3a21c73bcc6"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","9.1","8.19"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234675","number":234675,"mergeCommit":{"message":"Hide
side-nav during report generation (elastic#234675)\n\nFixes: elastic#227187\n\nWhen we
request a report we send the target element's width and use it\nto
create a browser window.\nTherefore the element's width becomes the
window width. When the\nside-nav is visible on the page, it pushes the
dashboard to the right\nand makes it smaller. As we take only the target
element's screenshot\nand use the width we passed as param as image
width in the pdf, it\nbecomes skewed.\n\nThis PR removes the side-nav
from the page during the report generation.\nSo the dashboard uses the
full window width which is the original number\nwe passed
initially.\n\n## To verify:\n\nAdd `Sample web logs` data.\nChange the
solution view in the Space to something other than Classic.\nGo to
`Dashboards > Sample Logs Data` and generate a PDF report.\nThe
screenshot should not be skewed.\n\nAdd the below config to your
kibana.yml\n```\nfeature_flags.overrides:\n core.chrome.projectSideNav:
'v2'\n```\nGo to `Dashboards > Sample Logs Data` and generate a PDF
report.\nThe fix should be working with the new side-nav as
well.","sha":"fa3bcdfb907e1b7b8b451ccfa0dcd3a21c73bcc6"}}]}] BACKPORT-->

Author: ersin-erdal

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

@@ -12,6 +12,7 @@ import { EuiCollapsibleNavBeta } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 import { css } from '@emotion/css';
+import classnames from 'classnames';
 
 interface Props {
   toggleSideNav: (isVisible: boolean) => void;
@@ -26,6 +27,14 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
   toggleSideNav,
 }) => {
   const isCollapsed = useObservable(isSideNavCollapsed$, false);
+  const className = classnames(
+    'hide-for-sharing',
+    css`
+      .euiFlyoutBody__overflowContent {
+        height: 100%;
+      }
+    `
+  );
 
   return (
     <EuiCollapsibleNavBeta
@@ -36,11 +45,7 @@ export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
         overflow: 'visible',
         clipPath: `polygon(0 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 0, calc(var(--euiCollapsibleNavOffset) + ${PANEL_WIDTH}px) 100%, 0 100%)`,
       }}
-      className={css`
-        .euiFlyoutBody__overflowContent {
-          height: 100%;
-        }
-      `}
+      className={className}
     >
       {children}
     </EuiCollapsibleNavBeta>