rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aman Harwara
2022-09-07 17:36:49 +05:30
committed by GitHub
parent f21269fc69
commit 4617afe14e
5 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
View File

@@ -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">

2
packages/web/src/javascripts/Components/Footer/Footer.tsx
View File

@@ -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">

5
packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
View File

@@ -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

2
packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
View File

@@ -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