DashboardSettings: Fixed scrolling (#23108)

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

@@ -9,6 +9,7 @@ import { DashboardModel } from '../../state/DashboardModel';
 import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { e2e } from '@grafana/e2e';
 import { updateLocation } from 'app/core/actions';
+import { CustomScrollbar } from '@grafana/ui';
 
 export interface Props {
   dashboard: DashboardModel | null;
@@ -57,7 +58,9 @@ export class DashboardSettings extends PureComponent<Props> {
             <span>{dashboard.title} / Settings</span>
           </div>
         </div>
-        <div className="dashboard-settings__body1" ref={element => (this.element = element)} />
+        <CustomScrollbar>
+          <div className="dashboard-settings__body1" ref={element => (this.element = element)} />
+        </CustomScrollbar>
       </div>
     );
   }

public/sass/components/_dashboard_settings.scss

@@ -8,15 +8,17 @@
   bottom: 0;
   z-index: $zindex-modal;
   background: $body-bg;
+  display: flex;
+  flex-direction: column;
 }
 
 .dashboard-settings__body1 {
-  height: calc(100% - #{$navbarHeight});
+  min-height: 100%;
   width: 100%;
 }
 
 .dashboard-settings__body2 {
-  height: 100%;
+  min-height: 100%;
   width: 100%;
   display: flex;
   flex-direction: row;

public/sass/components/_navbar.scss

@@ -4,7 +4,7 @@
   height: $navbarHeight;
   padding: 0 16px 0 60px;
   display: flex;
-  flex-grow: 1;
+  flex-grow: 0;
   border-bottom: 1px solid transparent;
   transition-duration: 350ms;
   transition-timing-function: ease-in-out;