From c29e0f511d27e94d5943fc9b4186d05f19b325f6 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 30 Jan 2023 20:19:23 +0530
Subject: [PATCH] fix: Fixed issue where dropdowns in preferences would not be
 visible

---
 .../javascripts/Components/Preferences/Panes/Appearance.tsx | 6 ++++++
 .../Preferences/Panes/Appearance/EditorAppearance.tsx       | 6 ++++++
 .../Components/Preferences/Panes/Backups/EmailBackups.tsx   | 3 +++
 3 files changed, 15 insertions(+)

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>