[8.17] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603)#229658
Merged
nickofthyme merged 2 commits intoelastic:8.17from Jul 30, 2025
Merged
[8.17] [Lens][Reporting] Add custom CSS for Lens screenshots (#228603)#229658nickofthyme merged 2 commits intoelastic:8.17from
nickofthyme merged 2 commits intoelastic:8.17from
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) # Conflicts: # x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/frame_layout.tsx
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
|
markov00
approved these changes
Jul 30, 2025
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
4 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.17:Questions ?
Please refer to the Backport tool documentation