From 1a0a8c73e2dfef6b7733290c8c49e3b99e37cef3 Mon Sep 17 00:00:00 2001
From: Rachel Shen <rshen@elastic.co>
Date: Tue, 15 Oct 2024 13:10:36 -0600
Subject: [PATCH] [8.15] [Dashboard] [Usability] Add scroll margin to panels
 (#193430) (#196382)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Dashboard] [Usability] Add scroll margin to panels
(#193430)](https://github.com/elastic/kibana/pull/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":"rshen@elastic.co"},"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
<Heenawter@users.noreply.github.com>","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
<Heenawter@users.noreply.github.com>","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
<Heenawter@users.noreply.github.com>","sha":"b4d52e440ef6f7c68675893cde4994a2b3d45247"}},{"url":"https://github.com/elastic/kibana/pull/195323","number":195323,"branch":"8.x","state":"OPEN"}]}]
BACKPORT-->
---
 .../component/grid/_dashboard_panel.scss                   | 7 +++++++
 .../component/grid/dashboard_grid_item.tsx                 | 2 +-
 .../dashboard_container/embeddable/dashboard_container.tsx | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss
index 5a252f9bf1630..d54f513a207a4 100644
--- a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss
+++ b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss
@@ -4,6 +4,11 @@
   * .embPanel--editing doesn't get updating without a hard refresh
   */
 
+.dshDashboardGrid__item {
+  scroll-margin-top: calc((var(--euiFixedHeadersOffset, 100) * 2) + $euiSizeS);
+  scroll-margin-bottom: $euiSizeS;
+}
+
 // LAYOUT MODES
 // Adjust borders/etc... for non-spaced out and expanded panels
 .dshLayout-withoutMargins {
@@ -36,9 +41,11 @@
   0% {
     outline: solid $euiSizeXS transparentize($euiColorSuccess, 1);
   }
+
   25% {
     outline: solid $euiSizeXS transparentize($euiColorSuccess, .5);
   }
+
   100% {
     outline: solid $euiSizeXS transparentize($euiColorSuccess, 1);
   }
diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx
index d4fd84618747d..28788f38826f5 100644
--- a/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx
+++ b/src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx
@@ -53,7 +53,7 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
     const hidePanel = expandedPanelId !== undefined && expandedPanelId !== id;
     const focusPanel = focusedPanelId !== undefined && focusedPanelId === id;
     const blurPanel = focusedPanelId !== undefined && focusedPanelId !== id;
-    const classes = classNames({
+    const classes = classNames('dshDashboardGrid__item', {
       'dshDashboardGrid__item--expanded': expandPanel,
       'dshDashboardGrid__item--hidden': hidePanel,
       'dshDashboardGrid__item--focused': focusPanel,
diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
index 45f3b2535ff6d..23052bd094e82 100644
--- a/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
+++ b/src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx
@@ -784,7 +784,7 @@ export class DashboardContainer
         return;
       }
 
-      panelRef.scrollIntoView({ block: 'center' });
+      panelRef.scrollIntoView({ block: 'nearest' });
     });
   };