diff --git a/src/Generic/components/DialogActions.tsx b/src/Generic/components/DialogActions.tsx
index 6d41eff9..fb36dbcc 100644
--- a/src/Generic/components/DialogActions.tsx
+++ b/src/Generic/components/DialogActions.tsx
@@ -43,6 +43,14 @@ const useActionButtonStyles = makeStyles((theme) => ({
marginRight: -12
}
},
+ confirmDialogActionsBox: {
+ margin: "8px 24px 16px",
+
+ [breakpoints.down(600)]: {
+ justifyContent: "center",
+ margin: "8px 24px 16px"
+ }
+ },
mobileDialogActionsBox: {
display: "flex",
position: "fixed",
@@ -263,17 +271,18 @@ interface ConfirmDialogProps {
}
export function ConfirmDialog(props: ConfirmDialogProps) {
- const isSmallScreen = useIsMobile()
+ const classes = useActionButtonStyles()
+
return (
)
}
diff --git a/src/TransactionReview/components/ReviewForm.tsx b/src/TransactionReview/components/ReviewForm.tsx
index 3ce870ae..6d4a2212 100644
--- a/src/TransactionReview/components/ReviewForm.tsx
+++ b/src/TransactionReview/components/ReviewForm.tsx
@@ -76,9 +76,11 @@ function TxConfirmationForm(props: Props) {
const [errors, setErrors] = React.useState>({})
const [formValues, setFormValues] = React.useState({ password: null })
const [loading, setLoading] = React.useState(false)
+ const passwordFieldRef = React.useRef(null)
const { t } = useTranslation()
const passwordError = props.passwordError || errors.password
+ const showPasswordField = props.account.requiresPassword && !props.disabled
const cancelDismissal = React.useCallback(() => setDismissalConfirmationPending(false), [])
const requestDismissalConfirmation = React.useCallback(() => setDismissalConfirmationPending(true), [])
@@ -169,6 +171,18 @@ function TxConfirmationForm(props: Props) {
}, 0)
}, [])
+ React.useEffect(() => {
+ if (!showPasswordField) {
+ return undefined
+ }
+
+ const animationFrame = window.requestAnimationFrame(() => {
+ passwordFieldRef.current?.scrollIntoView(false)
+ })
+
+ return () => window.cancelAnimationFrame(animationFrame)
+ }, [showPasswordField, props.transaction])
+
return (