diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
index f37ff1f54..d805c53d9 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
@@ -133,6 +133,9 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
                   value={autoLightTheme}
                   onChange={changeAutoLightTheme}
                   disabled={!useDeviceSettings}
+                  classNameOverride={{
+                    popover: '!z-modal',
+                  }}
                 />
               </div>
             </div>
@@ -148,6 +151,9 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
                   value={autoDarkTheme}
                   onChange={changeAutoDarkTheme}
                   disabled={!useDeviceSettings}
+                  classNameOverride={{
+                    popover: '!z-modal',
+                  }}
                 />
               </div>
             </div>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
index 3fe4dee5a..7df461ddf 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
@@ -99,6 +99,9 @@ const EditorDefaults = ({ application }: Props) => {
                 items={fontSizeDropdownOptions}
                 value={fontSize}
                 onChange={handleFontSizeChange}
+                classNameOverride={{
+                  popover: '!z-modal',
+                }}
               />
             </div>
           </div>
@@ -113,6 +116,9 @@ const EditorDefaults = ({ application }: Props) => {
                 items={lineHeightDropdownOptions}
                 value={lineHeight}
                 onChange={handleLineHeightChange}
+                classNameOverride={{
+                  popover: '!z-modal',
+                }}
               />
             </div>
           </div>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
index 52cbe6edf..ed81e20b4 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx
@@ -124,6 +124,9 @@ const EmailBackups = ({ application }: Props) => {
                 items={emailFrequencyOptions}
                 value={emailFrequency}
                 onChange={handleEmailFrequencyChange}
+                classNameOverride={{
+                  popover: '!z-modal',
+                }}
               />
             )}
           </div>