Keep confirmation dialog actions and password field visible

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 (
     <Dialog open={props.open} onClose={props.onClose} TransitionComponent={CompactDialogTransition}>
       <DialogTitle>{props.title}</DialogTitle>
-      <DialogContent style={{ paddingBottom: isSmallScreen ? 24 : undefined }}>
+      <DialogContent>
         <Typography variant="body2">{props.children}</Typography>
-        <DialogActionsBox preventMobileActionsBox smallDialog>
-          {props.cancelButton}
-          {props.confirmButton}
-        </DialogActionsBox>
       </DialogContent>
+      <DialogActionsBox className={classes.confirmDialogActionsBox} preventMobileActionsBox smallDialog>
+        {props.cancelButton}
+        {props.confirmButton}
+      </DialogActionsBox>
     </Dialog>
   )
 }

src/TransactionReview/components/ReviewForm.tsx

@@ -76,9 +76,11 @@ function TxConfirmationForm(props: Props) {
   const [errors, setErrors] = React.useState<Partial<FormErrors>>({})
   const [formValues, setFormValues] = React.useState<FormValues>({ password: null })
   const [loading, setLoading] = React.useState<boolean>(false)
+  const passwordFieldRef = React.useRef<HTMLInputElement | null>(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 (
     <form id={formID} noValidate onSubmit={handleFormSubmission}>
       <VerticalLayout>
@@ -184,7 +198,7 @@ function TxConfirmationForm(props: Props) {
           paymentSummary={props.paymentSummary}
           paymentSummaryIsEstimated={props.paymentSummaryIsEstimated}
         />
-        {props.account.requiresPassword && !props.disabled ? (
+        {showPasswordField ? (
           <PasswordField
             autoFocus={import.meta.env.VITE_PLATFORM !== "ios"}
             error={Boolean(passwordError)}
@@ -194,14 +208,15 @@ function TxConfirmationForm(props: Props) {
                 : t("account.transaction-review.textfield.password.label")
             }
             fullWidth
+            inputRef={passwordFieldRef}
             margin="dense"
             value={formValues.password || ""}
             onChange={handleTextFieldChange}
             style={{ margin: "32px auto 0", maxWidth: 300 }}
           />
         ) : null}
       </VerticalLayout>
-      <Portal desktop="inline" target={props.actionsRef && props.actionsRef.element}>
+      <Portal target={props.actionsRef && props.actionsRef.element}>
         <DialogActionsBox smallDialog={props.disabled && !props.signatureRequest}>
           {props.signatureRequest ? (
             <ActionButton icon={DismissIcon} onClick={requestDismissalConfirmation}>

src/TransactionReview/components/TransactionReviewDialog.tsx

@@ -87,7 +87,7 @@ export function TransactionReviewDialogBody(props: TransactionReviewDialogBodyPr
   )
 
   return (
-    <DialogBody top={titleContent} actions={props.showSubmissionProgress ? null : dialogActionsRef}>
+    <DialogBody top={titleContent} actions={props.showSubmissionProgress ? null : dialogActionsRef} actionsPosition="bottom">
       {props.transaction && !props.showSubmissionProgress ? (
         <Box margin={`12px ${isSmallScreen ? "4px" : "0"} 0`} textAlign="center">
           <ReviewForm