[8.19] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603) (#229532)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Lens][Reporting] Add custom CSS for Lens screenshots
(#228603)](#228603)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-26T19:27:22Z","message":"[Lens][Reporting]
Add custom CSS for Lens screenshots (#228603)\n\n## Summary\n\nFix Lens
screenshotting issues:\n\n- apply `hide-for-sharing` class to the search
bar in lens\n- added two specialized styles for Lens workspace to fix
the current\npositioning error by removing the container display flex
and\npadding/borders.\n\nWhat is actually doing is removing horizontal
and vertical spacing,\ncaused by the current flex layout
applied.\n\nI've tried to tracking down a bit more why exactly this is
happening,\nbut I didn't want to touch much the current reporting logic.
From what I\nsaw the reporting for PNG works like that:\n1- the service
receive, together with other info, the current `layout`\nfrom the
browser page (consisting in the size of the current\nvisualization)\n2-
it creates a puppeter page with a viewport of the same size of
the\n`layout.width` and a `scaleFactor`\n3- the setup step, waits for
elements to be on the screen, applies the\nand the render is
completed\n4- we detect element positions and sizing with a
headless-browser size\ncall to getBoundingBoxRect()\n5- the viewport is
now is changed again (actually just vertically) to\ncover the entire
height from the top to the bottom of the chart\n(computed at step 4)\n6-
a screenshot request to the headless browser covering clipping
the\nscreen to just the element position, size.\n\nI believe the best
way to approach this in the future is, instead of\nchanging the viewport
and and clipping where the element is, we can\napply a `position:fixed`
push the chart to the top/left corner and\napplying the original
`layout` size to the screenshotting element. In\nthis way we are sure
that the sizing and clipping is always perfect.\n\n\nfix
https://github.com/elastic/kibana/issues/227930\nfix
https://github.com/elastic/kibana/issues/219297\n\n---------\n\nCo-authored-by:
Nick Partridge <[email protected]>\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"46808d6debc42d1e0988c1caaf16cd0fabaff448","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Visualizations","Feature:Lens","Feature:Reporting:Screenshot","backport:version","v9.1.0","v9.2.0","v9.0.5","v8.17.10","v8.19.1"],"title":"[Lens][Reporting]
Add custom CSS for Lens
screenshots","number":228603,"url":"https://github.com/elastic/kibana/pull/228603","mergeCommit":{"message":"[Lens][Reporting]
Add custom CSS for Lens screenshots (#228603)\n\n## Summary\n\nFix Lens
screenshotting issues:\n\n- apply `hide-for-sharing` class to the search
bar in lens\n- added two specialized styles for Lens workspace to fix
the current\npositioning error by removing the container display flex
and\npadding/borders.\n\nWhat is actually doing is removing horizontal
and vertical spacing,\ncaused by the current flex layout
applied.\n\nI've tried to tracking down a bit more why exactly this is
happening,\nbut I didn't want to touch much the current reporting logic.
From what I\nsaw the reporting for PNG works like that:\n1- the service
receive, together with other info, the current `layout`\nfrom the
browser page (consisting in the size of the current\nvisualization)\n2-
it creates a puppeter page with a viewport of the same size of
the\n`layout.width` and a `scaleFactor`\n3- the setup step, waits for
elements to be on the screen, applies the\nand the render is
completed\n4- we detect element positions and sizing with a
headless-browser size\ncall to getBoundingBoxRect()\n5- the viewport is
now is changed again (actually just vertically) to\ncover the entire
height from the top to the bottom of the chart\n(computed at step 4)\n6-
a screenshot request to the headless browser covering clipping
the\nscreen to just the element position, size.\n\nI believe the best
way to approach this in the future is, instead of\nchanging the viewport
and and clipping where the element is, we can\napply a `position:fixed`
push the chart to the top/left corner and\napplying the original
`layout` size to the screenshotting element. In\nthis way we are sure
that the sizing and clipping is always perfect.\n\n\nfix
https://github.com/elastic/kibana/issues/227930\nfix
https://github.com/elastic/kibana/issues/219297\n\n---------\n\nCo-authored-by:
Nick Partridge <[email protected]>\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"46808d6debc42d1e0988c1caaf16cd0fabaff448"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","9.0","8.17","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.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/228603","number":228603,"mergeCommit":{"message":"[Lens][Reporting]
Add custom CSS for Lens screenshots (#228603)\n\n## Summary\n\nFix Lens
screenshotting issues:\n\n- apply `hide-for-sharing` class to the search
bar in lens\n- added two specialized styles for Lens workspace to fix
the current\npositioning error by removing the container display flex
and\npadding/borders.\n\nWhat is actually doing is removing horizontal
and vertical spacing,\ncaused by the current flex layout
applied.\n\nI've tried to tracking down a bit more why exactly this is
happening,\nbut I didn't want to touch much the current reporting logic.
From what I\nsaw the reporting for PNG works like that:\n1- the service
receive, together with other info, the current `layout`\nfrom the
browser page (consisting in the size of the current\nvisualization)\n2-
it creates a puppeter page with a viewport of the same size of
the\n`layout.width` and a `scaleFactor`\n3- the setup step, waits for
elements to be on the screen, applies the\nand the render is
completed\n4- we detect element positions and sizing with a
headless-browser size\ncall to getBoundingBoxRect()\n5- the viewport is
now is changed again (actually just vertically) to\ncover the entire
height from the top to the bottom of the chart\n(computed at step 4)\n6-
a screenshot request to the headless browser covering clipping
the\nscreen to just the element position, size.\n\nI believe the best
way to approach this in the future is, instead of\nchanging the viewport
and and clipping where the element is, we can\napply a `position:fixed`
push the chart to the top/left corner and\napplying the original
`layout` size to the screenshotting element. In\nthis way we are sure
that the sizing and clipping is always perfect.\n\n\nfix
https://github.com/elastic/kibana/issues/227930\nfix
https://github.com/elastic/kibana/issues/219297\n\n---------\n\nCo-authored-by:
Nick Partridge <[email protected]>\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"46808d6debc42d1e0988c1caaf16cd0fabaff448"}},{"branch":"9.0","label":"v9.0.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.10","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: Nick Partridge <[email protected]>

Author: 3 people

src/platform/plugins/shared/unified_search/public/search_bar/search_bar.tsx

@@ -503,7 +503,7 @@ export class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> ex
       isScreenshotMode && styles.hidden,
     ];
 
-    const classes = classNames('uniSearchBar', {
+    const classes = classNames('uniSearchBar', 'hide-for-sharing', {
       [`uniSearchBar--hidden`]: isScreenshotMode,
       [`uniSearchBar--${this.props.displayStyle}`]: this.props.displayStyle,
     });

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
+import classNames from 'classnames';
 import { useLensSelector, selectIsFullscreenDatasource } from '../../state_management';
 
 export interface FrameLayoutProps {
@@ -111,7 +112,7 @@ export function FrameLayout(props: FrameLayoutProps) {
               {props.dataPanel}
             </section>
             <section
-              className="eui-scrollBar"
+              className={classNames('eui-scrollBar', 'lnsVisualizationWorkspace_container')}
               css={css`
                 min-width: 432px;
                 overflow: hidden auto;

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx

@@ -271,6 +271,7 @@ export function WorkspacePanelWrapper({
           alignItems="center"
           justifyContent="center"
           direction="column"
+          className="lnsWorkspacePanelWrapper__contentFlexGroup"
           css={css`
             height: 100%;
           `}

x-pack/platform/plugins/shared/screenshotting/server/layouts/preserve_layout.css

@@ -22,3 +22,15 @@
 #globalBannerList {
   display: none;
 }
+
+
+/**
+ * Specific for lens editor workspace screenshotting
+ */
+.lnsWorkspacePanelWrapper__contentFlexGroup {
+  display: block  !important;
+}
+.lnsVisualizationWorkspace_container {
+  padding: 0 !important;
+  border: 0 !important;
+}