[8.15] [Dashboard] [Usability] Add scroll margin to panels (#193430) (#…

…196382) # Backport This will backport the following commits from `main` to `8.15`: - [[Dashboard] [Usability] Add scroll margin to panels (#193430)](#193430)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Oct 15, 2024 · 1a0a8c7 · 1a0a8c7
1 parent 7d8fb96
commit 1a0a8c7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 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
@@ -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
@@ -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
@@ -784,7 +784,7 @@ export class DashboardContainer
         return;
       }
 
-      panelRef.scrollIntoView({ block: 'center' });
+      panelRef.scrollIntoView({ block: 'nearest' });
     });
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -784,7 +784,7 @@ export class DashboardContainer @@
             return;
           }
-          panelRef.scrollIntoView({ block: 'center' });
+          panelRef.scrollIntoView({ block: 'nearest' });
         });
       };
@@ Expand Down @@