fix: Fixed issue where dropdowns in preferences would not be visible

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>

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>

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>