[8.19] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603)#229532
Merged
kibanamachine merged 1 commit intoelastic:8.19from Jul 26, 2025
Merged
[8.19] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603)#229532kibanamachine merged 1 commit intoelastic:8.19from
kibanamachine merged 1 commit intoelastic:8.19from
Conversation
## Summary Fix Lens screenshotting issues: - apply `hide-for-sharing` class to the search bar in lens - added two specialized styles for Lens workspace to fix the current positioning error by removing the container display flex and padding/borders. What is actually doing is removing horizontal and vertical spacing, caused by the current flex layout applied. I've tried to tracking down a bit more why exactly this is happening, but I didn't want to touch much the current reporting logic. From what I saw the reporting for PNG works like that: 1- the service receive, together with other info, the current `layout` from the browser page (consisting in the size of the current visualization) 2- it creates a puppeter page with a viewport of the same size of the `layout.width` and a `scaleFactor` 3- the setup step, waits for elements to be on the screen, applies the and the render is completed 4- we detect element positions and sizing with a headless-browser size call to getBoundingBoxRect() 5- the viewport is now is changed again (actually just vertically) to cover the entire height from the top to the bottom of the chart (computed at step 4) 6- a screenshot request to the headless browser covering clipping the screen to just the element position, size. I believe the best way to approach this in the future is, instead of changing the viewport and and clipping where the element is, we can apply a `position:fixed` push the chart to the top/left corner and applying the original `layout` size to the screenshotting element. In this way we are sure that the sizing and clipping is always perfect. fix elastic#227930 fix elastic#219297 --------- Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 46808d6)
![github-actions[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
nickofthyme
added a commit
that referenced
this pull request
Jul 30, 2025
…#229657) # Backport This will backport the following commits from `main` to `9.0`: - [[Lens][Reporting] Add custom CSS for Lens screenshots (#228603)](#228603) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Marco Vettorello","email":"marco.vettorello@elastic.co"},"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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","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","v8.19.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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"46808d6debc42d1e0988c1caaf16cd0fabaff448"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.17"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/229533","number":229533,"state":"MERGED","mergeCommit":{"sha":"371e60c1bd0683004db5da2195b6b952071bca4b","message":"[9.1] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603) (#229533)\n\n# Backport\n\nThis will backport the following commits from `main` to `9.1`:\n- [[Lens][Reporting] Add custom CSS for Lens screenshots\n(#228603)](https://github.com/elastic/kibana/pull/228603)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Nick Partridge <nicholas.partridge@elastic.co>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/229532","number":229532,"state":"MERGED","mergeCommit":{"sha":"b9f5c904eb88e69b2027b879177a27281f5f8218","message":"[8.19] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603) (#229532)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.19`:\n- [[Lens][Reporting] Add custom CSS for Lens screenshots\n(#228603)](https://github.com/elastic/kibana/pull/228603)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Nick Partridge <nicholas.partridge@elastic.co>"}},{"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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","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"}]}] BACKPORT--> --------- Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
nickofthyme
added a commit
that referenced
this pull request
Jul 30, 2025
#229658) # Backport This will backport the following commits from `main` to `8.17`: - [[Lens][Reporting] Add custom CSS for Lens screenshots (#228603)](#228603) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Marco Vettorello","email":"marco.vettorello@elastic.co"},"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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","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","v8.19.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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"46808d6debc42d1e0988c1caaf16cd0fabaff448"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.17"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/229533","number":229533,"state":"MERGED","mergeCommit":{"sha":"371e60c1bd0683004db5da2195b6b952071bca4b","message":"[9.1] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603) (#229533)\n\n# Backport\n\nThis will backport the following commits from `main` to `9.1`:\n- [[Lens][Reporting] Add custom CSS for Lens screenshots\n(#228603)](https://github.com/elastic/kibana/pull/228603)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Nick Partridge <nicholas.partridge@elastic.co>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/229532","number":229532,"state":"MERGED","mergeCommit":{"sha":"b9f5c904eb88e69b2027b879177a27281f5f8218","message":"[8.19] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603) (#229532)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.19`:\n- [[Lens][Reporting] Add custom CSS for Lens screenshots\n(#228603)](https://github.com/elastic/kibana/pull/228603)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Nick Partridge <nicholas.partridge@elastic.co>"}},{"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 <nicholas.partridge@elastic.co>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","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"}]}] BACKPORT--> --------- Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Backport
This will backport the following commits from
mainto8.19:Questions ?
Please refer to the Backport tool documentation