frontend: optimize setup workflow in responsive mode

Author: thisconnect

frontends/web/src/components/icon/combined.module.css

@@ -9,7 +9,7 @@
 
 .bitbox02 {
     display: inline-block;
-    max-width: 264px;
+    max-width: min(264px, 80%);
     position: relative;
     right: -16px;
 }

frontends/web/src/routes/device/bitbox02/setup/name.tsx

@@ -54,7 +54,10 @@ export const SetDeviceName = ({
         withBottomBar
         verticallyCentered
         width="600px">
-        <ViewHeader title={t('bitbox02Wizard.stepCreate.title')}>
+        <ViewHeader
+          small
+          title={t('bitbox02Wizard.stepCreate.title')}
+        >
           <p>{t('bitbox02Wizard.stepCreate.description')}</p>
           {missingSDCardWarning && (
             <Message className="m-bottom-half" type="warning">

frontends/web/src/routes/device/bitbox02/setup/pairing.tsx

@@ -60,7 +60,10 @@ export const Pairing = ({
       verticallyCentered
       withBottomBar
       width="670px">
-      <ViewHeader title={t('bitbox02Wizard.pairing.title')}>
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.pairing.title')}
+      >
         { pairingFailed ? (
           <Message key="pairingFailed" type="warning">
             {t('bitbox02Wizard.pairing.failed')}

frontends/web/src/routes/device/bitbox02/setup/password.tsx

@@ -65,7 +65,10 @@ export const SetPasswordWithBackup = ({
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('backup.restore.confirmTitle')}>
+      <ViewHeader
+        small
+        title={t('backup.restore.confirmTitle')}
+      >
         { forBackup ? (
           <div>
             <MultilineMarkup tagName="div" markup={t('backup.restore.selectedBackup', {

frontends/web/src/routes/device/bitbox02/setup/restore.tsx

@@ -41,7 +41,10 @@ export const RestoreFromSDCardBackup = ({
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('backup.restore.confirmTitle')} />
+      <ViewHeader
+        small
+        title={t('backup.restore.confirmTitle')}
+      />
       <ViewContent>
         <BackupsV2
           deviceID={deviceID}

frontends/web/src/routes/device/bitbox02/setup/success.tsx

@@ -66,7 +66,10 @@ export const RestoreFromSDCardSuccess = ({ onContinue }: TProps) => {
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('bitbox02Wizard.stepBackupSuccess.title')} />
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.stepBackupSuccess.title')}
+      />
       <ViewContent textAlign="left">
         <p>
           {t('bitbox02Wizard.stepCreateSuccess.removeMicroSD')}
@@ -100,7 +103,10 @@ export const RestoreFromMnemonicSuccess = ({ onContinue }: TProps) => {
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('bitbox02Wizard.stepBackupSuccess.title')} />
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.stepBackupSuccess.title')}
+      />
       <ViewContent textAlign="left">
         <p className="m-bottom-default">
           {t('bitbox02Wizard.stepBackupSuccess.fundsSafe')}

frontends/web/src/style/base.css

@@ -104,7 +104,7 @@ pre {
     background-color: var(--background-secondary);
     display: block;
     font-family: monospace;
-    font-size: 2rem;
+    font-size: var(--size-default);
     margin: 0 0 var(--space-default) 0;
     padding: var(--space-default);
     text-align: center;