[Dashboard] [Usability] Add scroll margin to panels #193430
Merged
+9
−3
Conversation
This file contains 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
rshen91
added
Team:Presentation
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
Heenawter
requested changes
Sep 20, 2024
Ah ok - yeah I don't know if this is working super well for long panels that extend past the viewport dimensions, but by overwriting the css at least users are able to scroll up and see the top of the panel. I think your video showed a good reason to not do scrollToTop. How do you feel about scrollIntoView({ block: 'nearest'}) ? |
Heenawter
reviewed
Sep 20, 2024
src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
57
to
59
| .coreSystemRootDomElement { | ||
| overflow-y: auto !important; | ||
| } |
There was a problem hiding this comment.
I believe allowing y-overflow leads to some strange behaviour when trying to scroll when both the editor + dashboard have scrollbars:
Screen.Recording.2024-09-20.at.11.26.01.AM.mov
I will default to @cqliu1's or @andreadelrio's opinion here, but I think the best solution might be to just change the scroll into view logical position method? 🤔 And nearest seems to work well IMO
There was a problem hiding this comment.
fyi I stumbled across the scroll-margin CSS property - and it seems like it will be a good helper here even without enabling overflow-y 👍
Heenawter
reviewed
Oct 1, 2024
src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
Outdated
Show resolved
Hide resolved
src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss
Outdated
Show resolved
Hide resolved
x-pack/test/functional/apps/maps/group3/reports/baseline/geo_map_report.png
Outdated
Show resolved
Hide resolved
src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss
Outdated
Show resolved
Hide resolved
1 task
kibanamachine
added
the
backport missing
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
3 similar comments
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
|
@rshen91 It seems some of the backports failed for this PR. If this PR doesn't need to be backported, would you mind adjusting the labels to avoid notification? |
rshen91
added
backport:current-major
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
kibanamachine
added
the
backport missing
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
rshen91
added a commit
to rshen91/kibana
that referenced
this pull request
Oct 15, 2024
## Summary Closes [[Bug] Upper part of the chart is hidden when user edits a chart inline · Issue elastic#192437 · elastic/kibana · GitHub](elastic#192437) This PR disables the overflow-y hidden css and the panel is set to the top. Users are also able to scroll to the top of the visualization in inline editing mode. ### Now: https://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893 --------- Co-authored-by: Hannah Mudge <[email protected]> (cherry picked from commit b4d52e4) # Conflicts: # src/plugins/dashboard/public/dashboard_api/track_panel.ts
kibanamachine
added a commit
that referenced
this pull request
Oct 15, 2024
…195323) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Usability] Add scroll margin to panels (#193430)](#193430) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Rachel Shen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-07T20:43:40Z","message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","v9.0.0","fixed","backport:all-open"],"title":"[Dashboard] [Usability] Add scroll margin to panels","number":193430,"url":"https://github.com/elastic/kibana/pull/193430","mergeCommit":{"message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193430","number":193430,"mergeCommit":{"message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247"}}]}] BACKPORT--> Co-authored-by: Rachel Shen <[email protected]>
rshen91
added a commit
that referenced
this pull request
Oct 15, 2024
…196382) # Backport This will backport the following commits from `main` to `8.15`: - [[Dashboard] [Usability] Add scroll margin to panels (#193430)](#193430) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Rachel Shen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-07T20:43:40Z","message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","backport missing","v9.0.0","fixed","backport:current-major"],"number":193430,"url":"https://github.com/elastic/kibana/pull/193430","mergeCommit":{"message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193430","number":193430,"mergeCommit":{"message":"[Dashboard] [Usability] Add scroll margin to panels (#193430)\n\n## Summary\r\n\r\nCloses [[Bug] Upper part of the chart is hidden when user edits a chart\r\ninline · Issue #192437 · elastic/kibana ·\r\nGitHub](https://github.com/elastic/kibana/issues/192437)\r\n\r\nThis PR disables the overflow-y hidden css and the panel is set to the\r\ntop. Users are also able to scroll to the top of the visualization in\r\ninline editing mode.\r\n\r\n### Now: \r\n\r\n\r\nhttps://github.com/user-attachments/assets/a68a3bdc-5452-40f3-84a6-4950e2fc7893\r\n\r\n---------\r\n\r\nCo-authored-by: Hannah Mudge <[email protected]>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247"}},{"url":"https://github.com/elastic/kibana/pull/195323","number":195323,"branch":"8.x","state":"OPEN"}]}] BACKPORT-->
kibanamachine
added
v8.15.3
and removed
backport missing
Heenawter
added
backport:version
|
Starting backport for target branches: 8.15, 8.x |
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
|
This PR didn't make it into the latest BC of v8.15.3. Updating the labels. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Closes [Bug] Upper part of the chart is hidden when user edits a chart inline · Issue #192437 · elastic/kibana · GitHub
This PR disables the overflow-y hidden css and the panel is set to the top. Users are also able to scroll to the top of the visualization in inline editing mode.
Now:
September.-.19.mp4