fix(web): fix otp input box with themes (#1723)

#1584 introduced a regression due to the way layouts are addressed with [CSS normalization](https://material-ui.com/components/css-baseline/#layout).

This PR ensures that the OTP input box will remain a `content-box` to avoid any text display and box sizing issues caused by padding.

The OTP input has also been changed to only accept numbers.

Fixes #1720.

web/src/views/LoginPortal/SecondFactor/OTPDial.tsx

@@ -27,6 +27,7 @@ const OTPDial = function (props: Props) {
                 value={props.passcode}
                 numInputs={6}
                 isDisabled={props.state === State.InProgress || props.state === State.Success}
+                isInputNum
                 hasErrored={props.state === State.Failure}
                 inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")}
             />
@@ -48,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
         marginTop: theme.spacing(2),
     },
     otpDigitInput: {
+        boxSizing: "content-box",
         padding: theme.spacing(),
         marginLeft: theme.spacing(0.5),
         marginRight: theme.spacing(0.5),