Merge branch 'pr/1189'

Author: benma

frontends/web/src/components/backups/backups.css

@@ -9,7 +9,7 @@
     border: solid 1px var(--color-lightgray);
     display: flex;
     flex-direction: column;
-    max-height: 320px;
+    max-height: 45vh;
     overflow-x: hidden;
     overflow-y: scroll;
     position: relative;
@@ -53,4 +53,20 @@
     margin-bottom: var(--space-quarter);
     font-size: var(--size-small);
     color: var(--color-secondary);
-}
+}
+
+.backupButtons {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row-reverse;
+    gap: var(--space-half);
+    margin-top: var(--space-default);
+}
+
+@media (max-width: 768px) {
+    .backupButtons {
+        align-items: center;
+        flex-direction: column;
+        margin-top: var(--space-default);
+    }
+}

frontends/web/src/components/devices/bitbox02/backups.tsx

@@ -132,7 +132,7 @@ class Backups extends Component<Props, State> {
                             )
                         }
                     </div>
-                    <div className={['buttons text-center', style.fullWidth].join(' ')}>
+                    <div className={backupStyle.backupButtons}>
                         {
                             showRestore && (
                                 <Button

frontends/web/src/components/devices/bitbox02/checkbackup.tsx

@@ -79,7 +79,7 @@ class Check extends Component<Props, State> {
         return (
             <div>
                 <Button
-                    secondary
+                    primary
                     disabled={this.props.disabled}
                     onClick={() => {
                         this.checkBackup(true, backups);

frontends/web/src/routes/device/manage-backups/manage-backups.jsx

@@ -109,7 +109,7 @@ export default class ManageBackups extends Component {
                 <div class="container">
                     <Header title={<h2>{t('backup.title')}</h2>} />
                     <div className="innerContainer scrollableContainer">
-                        <div className="content padded narrow">
+                        <div className="content padded">
                             <div className="subHeaderContainer" style="justify-content: center; margin: 0;">
                                 <div className="subHeader">
                                     <h3 className="text-center">{t('backup.list')}</h3>