From 4617afe14ea1931ba150be5597656c22e2116e73 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 7 Sep 2022 17:36:49 +0530
Subject: [PATCH] fix: footer and prefs dropdown cutoff by screen on some
 phones (#1491)

---
 .../src/javascripts/Components/Footer/AccountMenuButton.tsx | 6 +++---
 packages/web/src/javascripts/Components/Footer/Footer.tsx   | 2 +-
 .../javascripts/Components/Footer/QuickSettingsButton.tsx   | 5 +++--
 .../Components/Preferences/PreferencesMenuView.tsx          | 2 +-
 packages/web/src/stylesheets/_footer.scss                   | 3 ---
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
index 40f78dea4..26d8f2366 100644
--- a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
@@ -30,11 +30,11 @@ const AccountMenuButton = ({
         onClick={toggleMenu}
         className={classNames(
           isOpen ? 'bg-border' : '',
-          'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
+          'flex h-full w-12 cursor-pointer items-center justify-center rounded-full md:w-8',
         )}
       >
-        <div className={hasError ? 'text-danger' : (user ? 'text-info' : 'text-neutral') + ' h-5 w-5'}>
-          <Icon type="account-circle" className="max-h-5 hover:text-info" />
+        <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
+          <Icon type="account-circle" className="h-6 w-6 hover:text-info md:h-5 md:w-5" />
         </div>
       </button>
       <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">
diff --git a/packages/web/src/javascripts/Components/Footer/Footer.tsx b/packages/web/src/javascripts/Components/Footer/Footer.tsx
index 17f38b597..2568cf3a2 100644
--- a/packages/web/src/javascripts/Components/Footer/Footer.tsx
+++ b/packages/web/src/javascripts/Components/Footer/Footer.tsx
@@ -341,7 +341,7 @@ class Footer extends PureComponent<Props, State> {
       <div className="sn-component">
         <footer
           id="footer-bar"
-          className="z-footer-bar flex h-6 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text"
+          className="z-footer-bar flex h-12 w-full select-none items-center justify-between border-t border-border bg-contrast pl-3.5 pr-6 text-text md:h-8 md:px-3"
         >
           <div className="left flex h-full">
             <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">
diff --git a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
index 41adfa6e6..a32af0200 100644
--- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 331dcd7a8..16a77a6a1 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -23,7 +23,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="px-3 py-2 md:px-0">
+    <div className="px-5 pt-2 pb-4 md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
diff --git a/packages/web/src/stylesheets/_footer.scss b/packages/web/src/stylesheets/_footer.scss
index 2a283a37a..9cbe9c3bf 100644
--- a/packages/web/src/stylesheets/_footer.scss
+++ b/packages/web/src/stylesheets/_footer.scss
@@ -1,8 +1,5 @@
 #footer-bar {
   position: relative;
-  width: 100%;
-  height: $footer-height;
-  max-height: $footer-height;
 }
 
 #account-panel,