DashboardSettings: fixes vertical scrolling (#30640)

* fix(dashboardsettings): allow view to scroll vertically

* refactor(dashboardsettings): use theme bg colour instead of palette colour

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
-import { cx } from 'emotion';
+import { css, cx } from 'emotion';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, CustomScrollbar, Icon, IconName } from '@grafana/ui';
+import { Button, CustomScrollbar, Icon, IconName, stylesFactory } from '@grafana/ui';
+import config from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
 import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
@@ -15,12 +16,20 @@ import { AnnotationsSettings } from './AnnotationsSettings';
 import { LinksSettings } from './LinksSettings';
 import { VersionsSettings } from './VersionsSettings';
 import { JsonEditorSettings } from './JsonEditorSettings';
+import { GrafanaTheme } from '@grafana/data';
 export interface Props {
   dashboard: DashboardModel;
   updateLocation: typeof updateLocation;
   editview: string;
 }
 
+export interface SettingsPage {
+  id: string;
+  title: string;
+  icon: IconName;
+  render: () => React.ReactNode;
+}
+
 export class DashboardSettings extends PureComponent<Props> {
   onClose = () => {
     this.props.updateLocation({
@@ -142,6 +151,7 @@ export class DashboardSettings extends PureComponent<Props> {
     const currentPage = pages.find((page) => page.id === editview) ?? pages[0];
     const canSaveAs = contextSrv.hasEditPermissionInFolders;
     const canSave = dashboard.meta.canSave;
+    const styles = getStyles(config.theme);
 
     return (
       <div className="dashboard-settings">
@@ -154,7 +164,9 @@ export class DashboardSettings extends PureComponent<Props> {
             <span>{dashboard.title} / Settings</span>
           </div>
         </div>
-        <div className="dashboard-settings__body">
+        <CustomScrollbar>
+          <div className={styles.scrollInner}>
+            <div className={styles.settingsWrapper}>
               <aside className="dashboard-settings__aside">
                 {pages.map((page) => (
                   <a
@@ -174,20 +186,24 @@ export class DashboardSettings extends PureComponent<Props> {
                   )}
                 </div>
               </aside>
-          <div className="dashboard-settings__scroll">
-            <CustomScrollbar autoHeightMin="100%">
               <div className="dashboard-settings__content">{currentPage.render()}</div>
+            </div>
+          </div>
         </CustomScrollbar>
       </div>
-        </div>
-      </div>
     );
   }
 }
 
-export interface SettingsPage {
-  id: string;
-  title: string;
-  icon: IconName;
-  render: () => React.ReactNode;
-}
+const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+  scrollInner: css`
+    min-width: 100%;
+    min-height: 100%;
+  `,
+  settingsWrapper: css`
+    background: ${theme.colors.bg1};
+    display: flex;
+    min-height: 100%;
+    width: 100%;
+  `,
+}));

public/sass/components/_dashboard_settings.scss

@@ -20,12 +20,6 @@
   background: $panel-bg;
 }
 
-.dashboard-settings__scroll {
-  flex-grow: 1;
-  min-width: 0;
-  height: 100%;
-}
-
 .dashboard-settings__content {
   flex-grow: 1;
   min-width: 0;