diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 6e165184d46..76c0b15aacf 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/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,40 +164,46 @@ export class DashboardSettings extends PureComponent<Props> {
             <span>{dashboard.title} / Settings</span>
           </div>
         </div>
-        <div className="dashboard-settings__body">
-          <aside className="dashboard-settings__aside">
-            {pages.map((page) => (
-              <a
-                className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
-                aria-label={selectors.pages.Dashboard.Settings.General.sectionItems(page.title)}
-                onClick={() => this.onChangePage(page.id)}
-                key={page.id}
-              >
-                <Icon name={page.icon} style={{ marginRight: '4px' }} />
-                {page.title}
-              </a>
-            ))}
-            <div className="dashboard-settings__aside-actions">
-              {canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={this.onPostSave} />}
-              {canSaveAs && (
-                <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={this.onPostSave} variant="secondary" />
-              )}
-            </div>
-          </aside>
-          <div className="dashboard-settings__scroll">
-            <CustomScrollbar autoHeightMin="100%">
+        <CustomScrollbar>
+          <div className={styles.scrollInner}>
+            <div className={styles.settingsWrapper}>
+              <aside className="dashboard-settings__aside">
+                {pages.map((page) => (
+                  <a
+                    className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
+                    aria-label={selectors.pages.Dashboard.Settings.General.sectionItems(page.title)}
+                    onClick={() => this.onChangePage(page.id)}
+                    key={page.id}
+                  >
+                    <Icon name={page.icon} style={{ marginRight: '4px' }} />
+                    {page.title}
+                  </a>
+                ))}
+                <div className="dashboard-settings__aside-actions">
+                  {canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={this.onPostSave} />}
+                  {canSaveAs && (
+                    <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={this.onPostSave} variant="secondary" />
+                  )}
+                </div>
+              </aside>
               <div className="dashboard-settings__content">{currentPage.render()}</div>
-            </CustomScrollbar>
+            </div>
           </div>
-        </div>
+        </CustomScrollbar>
       </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%;
+  `,
+}));
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
index 3b4fa5c64e3..6d46a7c469f 100644
--- a/public/sass/components/_dashboard_settings.scss
+++ b/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;