fix: footer and prefs dropdown cutoff by screen on some phones (#1491)

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -1,6 +1,7 @@
 import { WebApplication } from '@/Application/Application'
 import { PreferencesController } from '@/Controllers/PreferencesController'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useRef } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
@@ -27,11 +28,11 @@ const QuickSettingsButton = ({
     <>
       <button
         onClick={toggleMenu}
-        className="flex h-full w-8 cursor-pointer items-center justify-center"
+        className="flex h-full w-12 cursor-pointer items-center justify-center md:w-8"
         ref={buttonRef}
       >
         <div className="h-5">
-          <Icon type="tune" className={(isOpen ? 'text-info' : '') + ' rounded hover:text-info'} />
+          <Icon type="tune" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
         </div>
       </button>
       <Popover