diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css index db39c49d4b..387058a058 100644 --- a/frontends/web/src/components/dialog/dialog.module.css +++ b/frontends/web/src/components/dialog/dialog.module.css @@ -11,6 +11,8 @@ width: 100%; background: transparent; z-index: 4010; + touch-action: none; + overscroll-behavior: contain; } .overlay.activeOverlay { @@ -26,6 +28,8 @@ text-align: left; max-height: calc(100dvh - calc(env(safe-area-inset-top) * 2)); overflow: auto; + touch-action: auto; + -webkit-overflow-scrolling: touch; } /* guard dialog and wait-dialog from view styles */ @media (min-width: 1200px) { diff --git a/frontends/web/src/routes/account/send/components/inputs/note-input.tsx b/frontends/web/src/routes/account/send/components/inputs/note-input.tsx index 667557bc87..a65865eaf4 100644 --- a/frontends/web/src/routes/account/send/components/inputs/note-input.tsx +++ b/frontends/web/src/routes/account/send/components/inputs/note-input.tsx @@ -17,6 +17,7 @@ import { ChangeEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { Input } from '@/components/forms'; +import { useMediaQuery } from '@/hooks/mediaquery'; import style from './note-input.module.css'; type TProps = { @@ -25,6 +26,7 @@ type TProps = { }; export const NoteInput = ({ onNoteChange, note }: TProps) => { + const isMobile = useMediaQuery('(max-width: 768px)'); const { t } = useTranslation(); return ( { {t('note.input.description')} } + autoFocus={!isMobile} id="note" onInput={(e: ChangeEvent) => onNoteChange(e.target.value)} value={note}