[Lens][Reporting] Add custom CSS for Lens screenshots#228603
Merged
nickofthyme merged 7 commits intoelastic:mainfrom Jul 26, 2025
Merged
[Lens][Reporting] Add custom CSS for Lens screenshots#228603nickofthyme merged 7 commits intoelastic:mainfrom
nickofthyme merged 7 commits intoelastic:mainfrom
Conversation
markov00
added
backport:version
Contributor
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
andrimal
approved these changes
Jul 21, 2025
ThomThomson
approved these changes
Jul 21, 2025
pmuellr
approved these changes
Jul 24, 2025
Contributor
pmuellr
left a comment
pmuellr
left a comment
There was a problem hiding this comment.
LGTM. Tested locally with dashboards (PDF, PDF/print, PNG) and visualizations (PDF, PNG), everything looks good.
Contributor
|
My review (approved) covers the relevant reporting code ... Oh, I can't remove that team from the list of reviewers. Maybe @markov00 can :-) |
Contributor
|
I found the only reference to Line 986 in 67a76e4 If it's no trouble, would you mind slipping in a fix for that, to No worries if you can't, we can do it in a separate issue/PR ... |
tsullivan
approved these changes
Jul 25, 2025
Member
tsullivan
left a comment
tsullivan
left a comment
There was a problem hiding this comment.
Approving to unblock. Code changes look good. Thank you!
Contributor
💔 Build Failed
Failed CI StepsMetrics [docs]
|
Contributor
|
Starting backport for target branches: 8.17, 8.19, 9.0, 9.1 |
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 26, 2025
## 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)
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 26, 2025
## 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)
Contributor
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jul 26, 2025
…#229533) # Backport This will backport the following commits from `main` to `9.1`: - [[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":"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","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.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 <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"},{"branch":"8.19","label":"v8.19.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Jul 26, 2025
#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":"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","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.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 <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"},{"branch":"8.19","label":"v8.19.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
nickofthyme
pushed a commit
to nickofthyme/kibana
that referenced
this pull request
Jul 28, 2025
## 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) # Conflicts: # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Contributor
|
@markov00 Could you review these backports ☝🏼 the files moved plus the emotion changes. |
nickofthyme
pushed a commit
to nickofthyme/kibana
that referenced
this pull request
Jul 28, 2025
## 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) # Conflicts: # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
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>
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Aug 5, 2025
## 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>
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
9 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.
Summary
Fix Lens screenshotting issues:
hide-for-sharingclass to the search bar in lensWhat 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
layoutfrom 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.widthand ascaleFactor3- 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:fixedpush the chart to the top/left corner and applying the originallayoutsize to the screenshotting element. In this way we are sure that the sizing and clipping is always perfect.fix #227930
fix #219297
Release Note
Fixes and issue in report where a png or pdf export would offset and clip part of the visualization.