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

## Summary Closes [[Bug] Upper part of the chart is hidden when user edits a chart inline · Issue #192437 · elastic/kibana · GitHub](#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]>
elastic · Oct 7, 2024 · b4d52e4 · b4d52e4
1 parent ecc7d4e
commit b4d52e4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_api/track_panel.ts b/src/plugins/dashboard/public/dashboard_api/track_panel.ts
@@ -73,8 +73,7 @@ export function initializeTrackPanel(untilEmbeddableLoaded: (id: string) => Prom
           };
           return;
         }
-
-        panelRef.scrollIntoView({ block: 'center' });
+        panelRef.scrollIntoView({ block: 'nearest' });
       });
     },
     scrollToTop: () => {

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
@@ -60,7 +60,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,