From f929b29b0b4148b4670227b9b68e763d8f0f1c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 6 May 2021 21:27:14 +0200
Subject: [PATCH] DashboardSettings: Fixing container styles for the json mode
 view (#33789)

---
 .../DashboardSettings/DashboardSettings.tsx        | 14 +-------------
 .../DashboardSettings/JsonEditorSettings.tsx       |  4 ++--
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 39d1fcdc49b..33de89e6b0d 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -27,7 +27,6 @@ export interface SettingsPage {
   title: string;
   icon: IconName;
   render: () => React.ReactNode;
-  fullWidth?: boolean;
 }
 
 export class DashboardSettings extends PureComponent<Props> {
@@ -99,7 +98,6 @@ export class DashboardSettings extends PureComponent<Props> {
       title: 'JSON Model',
       id: 'dashboard_json',
       icon: 'arrow',
-      fullWidth: true,
       render: () => <JsonEditorSettings dashboard={dashboard} />,
     });
 
@@ -172,9 +170,7 @@ export class DashboardSettings extends PureComponent<Props> {
                   )}
                 </div>
               </aside>
-              <div className={currentPage.fullWidth ? styles.settingsContentFullWidth : styles.settingsContent}>
-                {currentPage.render()}
-              </div>
+              <div className={styles.settingsContent}>{currentPage.render()}</div>
             </div>
           </div>
         </CustomScrollbar>
@@ -202,12 +198,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
     background: ${theme.colors.background.primary};
     border-radius: ${theme.shape.borderRadius()};
   `,
-  settingsContentFullWidth: css`
-    flex-grow: 1;
-    height: 100%;
-    padding: 32px;
-    min-width: 600px;
-    width: 100%;
-    height: 100%;
-  `,
 }));
diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
index 32e305d86c9..fd1219759a3 100644
--- a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
@@ -26,7 +26,7 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
   const styles = useStyles2(getStyles);
 
   return (
-    <>
+    <div>
       <h3 className="dashboard-settings__header">JSON Model</h3>
       <div className="dashboard-settings__subheader">
         The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel
@@ -53,7 +53,7 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
           <Button onClick={onClick}>Save changes</Button>
         </HorizontalGroup>
       )}
-    </>
+    </div>
   );
 };