chore: fix preferences menu placement on mobile

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -8,6 +8,7 @@ import {
   SelectItem,
   SelectLabel,
   SelectPopover,
+  SelectStoreProps,
   useSelectStore,
   VisuallyHidden,
 } from '@ariakit/react'
@@ -25,9 +26,19 @@ type DropdownProps = {
     popover?: string
   }
   fullWidth?: boolean
+  popoverPlacement?: SelectStoreProps['placement']
 }
 
-const Dropdown = ({ label, value, onChange, items, disabled, fullWidth, classNameOverride = {} }: DropdownProps) => {
+const Dropdown = ({
+  label,
+  value,
+  onChange,
+  items,
+  disabled,
+  fullWidth,
+  classNameOverride = {},
+  popoverPlacement,
+}: DropdownProps) => {
   const select = useSelectStore({
     defaultValue: value,
     renderCallback(props) {
@@ -37,6 +48,7 @@ const Dropdown = ({ label, value, onChange, items, disabled, fullWidth, classNam
         popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)'
       }
     },
+    placement: popoverPlacement,
   })
 
   const selectedValue = select.useState('value')

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -58,6 +58,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
             wrapper: 'relative',
             button: 'focus:outline-none focus:shadow-none focus:ring-none',
           }}
+          popoverPlacement="top"
         />
       </div>
     </div>