diff --git a/.betterer.results b/.betterer.results
index 1f976380ac4..9c7d33abd00 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1050,9 +1050,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/core/components/SharedPreferences/SharedPreferences.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/TagFilter/TagFilter.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 819608c4fb1..6bdfc8c89c6 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -9,7 +9,6 @@ import {
   Button,
   Field,
   FieldSet,
-  Form,
   Label,
   Select,
   stylesFactory,
@@ -87,7 +86,8 @@ export class SharedPreferences extends PureComponent<Props, State> {
     });
   }
 
-  onSubmitForm = async () => {
+  onSubmitForm = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
     const confirmationResult = this.props.onConfirm ? await this.props.onConfirm() : true;
 
     if (confirmationResult) {
@@ -137,94 +137,84 @@ export class SharedPreferences extends PureComponent<Props, State> {
     const currentThemeOption = this.themeOptions.find((x) => x.value === theme) ?? this.themeOptions[0];
 
     return (
-      <Form onSubmit={this.onSubmitForm}>
-        {() => {
-          return (
-            <>
-              <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
-                <Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
-                  <Select
-                    options={this.themeOptions}
-                    value={currentThemeOption}
-                    onChange={this.onThemeChanged}
-                    inputId="shared-preferences-theme-select"
-                  />
-                </Field>
+      <form onSubmit={this.onSubmitForm} className={styles.form}>
+        <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
+          <Field label={t('shared-preferences.fields.theme-label', 'Interface theme')}>
+            <Select
+              options={this.themeOptions}
+              value={currentThemeOption}
+              onChange={this.onThemeChanged}
+              inputId="shared-preferences-theme-select"
+            />
+          </Field>
 
-                <Field
-                  label={
-                    <Label htmlFor="home-dashboard-select">
-                      <span className={styles.labelText}>
-                        <Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
-                      </span>
-                    </Label>
-                  }
-                  data-testid="User preferences home dashboard drop down"
-                >
-                  <DashboardPicker
-                    value={homeDashboardUID}
-                    onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
-                    defaultOptions={true}
-                    isClearable={true}
-                    placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
-                    inputId="home-dashboard-select"
-                  />
-                </Field>
+          <Field
+            label={
+              <Label htmlFor="home-dashboard-select">
+                <span className={styles.labelText}>
+                  <Trans i18nKey="shared-preferences.fields.home-dashboard-label">Home Dashboard</Trans>
+                </span>
+              </Label>
+            }
+            data-testid="User preferences home dashboard drop down"
+          >
+            <DashboardPicker
+              value={homeDashboardUID}
+              onChange={(v) => this.onHomeDashboardChanged(v?.uid ?? '')}
+              defaultOptions={true}
+              isClearable={true}
+              placeholder={t('shared-preferences.fields.home-dashboard-placeholder', 'Default dashboard')}
+              inputId="home-dashboard-select"
+            />
+          </Field>
 
-                <Field
-                  label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
-                  data-testid={selectors.components.TimeZonePicker.containerV2}
-                >
-                  <TimeZonePicker
-                    includeInternal={true}
-                    value={timezone}
-                    onChange={this.onTimeZoneChanged}
-                    inputId="shared-preferences-timezone-picker"
-                  />
-                </Field>
+          <Field
+            label={t('shared-dashboard.fields.timezone-label', 'Timezone')}
+            data-testid={selectors.components.TimeZonePicker.containerV2}
+          >
+            <TimeZonePicker
+              includeInternal={true}
+              value={timezone}
+              onChange={this.onTimeZoneChanged}
+              inputId="shared-preferences-timezone-picker"
+            />
+          </Field>
 
-                <Field
-                  label={t('shared-preferences.fields.week-start-label', 'Week start')}
-                  data-testid={selectors.components.WeekStartPicker.containerV2}
-                >
-                  <WeekStartPicker
-                    value={weekStart || ''}
-                    onChange={this.onWeekStartChanged}
-                    inputId={'shared-preferences-week-start-picker'}
-                  />
-                </Field>
+          <Field
+            label={t('shared-preferences.fields.week-start-label', 'Week start')}
+            data-testid={selectors.components.WeekStartPicker.containerV2}
+          >
+            <WeekStartPicker
+              value={weekStart || ''}
+              onChange={this.onWeekStartChanged}
+              inputId={'shared-preferences-week-start-picker'}
+            />
+          </Field>
 
-                <Field
-                  label={
-                    <Label htmlFor="locale-select">
-                      <span className={styles.labelText}>
-                        <Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
-                      </span>
-                      <FeatureBadge featureState={FeatureState.beta} />
-                    </Label>
-                  }
-                  data-testid="User preferences language drop down"
-                >
-                  <Select
-                    value={languages.find((lang) => lang.value === language)}
-                    onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
-                    options={languages}
-                    placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
-                    inputId="locale-select"
-                  />
-                </Field>
-              </FieldSet>
-              <Button
-                type="submit"
-                variant="primary"
-                data-testid={selectors.components.UserProfile.preferencesSaveButton}
-              >
-                <Trans i18nKey="common.save">Save</Trans>
-              </Button>
-            </>
-          );
-        }}
-      </Form>
+          <Field
+            label={
+              <Label htmlFor="locale-select">
+                <span className={styles.labelText}>
+                  <Trans i18nKey="shared-preferences.fields.locale-label">Language</Trans>
+                </span>
+                <FeatureBadge featureState={FeatureState.beta} />
+              </Label>
+            }
+            data-testid="User preferences language drop down"
+          >
+            <Select
+              value={languages.find((lang) => lang.value === language)}
+              onChange={(lang: SelectableValue<string>) => this.onLanguageChanged(lang.value ?? '')}
+              options={languages}
+              placeholder={t('shared-preferences.fields.locale-placeholder', 'Choose language')}
+              inputId="locale-select"
+            />
+          </Field>
+        </FieldSet>
+        <Button type="submit" variant="primary" data-testid={selectors.components.UserProfile.preferencesSaveButton}>
+          <Trans i18nKey="common.save">Save</Trans>
+        </Button>
+      </form>
     );
   }
 }
@@ -233,9 +223,13 @@ export default SharedPreferences;
 
 const getStyles = stylesFactory(() => {
   return {
-    labelText: css`
-      margin-right: 6px;
-    `,
+    labelText: css({
+      marginRight: '6px',
+    }),
+    form: css({
+      width: '100%',
+      maxWidth: '600px',
+    }),
   };
 });