From c552c343f98e5f5a7842d2433acce396ca7b3ae5 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Tue, 9 Aug 2022 15:13:41 +0300
Subject: [PATCH] web/satellite: make modals responsive

Made next modals reponsive:
AddTeamMemberModal
ChangePasswordModal
CreateProjectModal
CreateProjectPromptModal
DisableMFAModal
EditProfileModal
EnableMFAModal
MFARecoveryCodesModal

Issue:
https://github.com/storj/storj/issues/5031

Change-Id: I9c80137febd1d16678f3de523634efc5010c8a9d
---
 .../components/common/PasswordStrength.vue    |  10 +-
 .../src/components/common/VModal.vue          |  11 +-
 .../components/modals/AddTeamMemberModal.vue  | 120 ++++++++++++++----
 .../components/modals/ChangePasswordModal.vue |  49 ++++++-
 .../components/modals/CreateProjectModal.vue  |  47 +++++--
 .../modals/CreateProjectPromptModal.vue       |  54 ++++++--
 .../src/components/modals/DisableMFAModal.vue |  29 ++++-
 .../components/modals/EditProfileModal.vue    |  19 +++
 .../src/components/modals/EnableMFAModal.vue  |  44 ++++++-
 .../modals/MFARecoveryCodesModal.vue          |  16 +++
 10 files changed, 332 insertions(+), 67 deletions(-)

diff --git a/web/satellite/src/components/common/PasswordStrength.vue b/web/satellite/src/components/common/PasswordStrength.vue
index b41e48e82..08a548b1a 100644
--- a/web/satellite/src/components/common/PasswordStrength.vue
+++ b/web/satellite/src/components/common/PasswordStrength.vue
@@ -174,13 +174,13 @@ export default class PasswordStrength extends Vue {
     private get barWidth(): string {
         switch (this.passwordStrength) {
         case 'Weak':
-            return '81px';
+            return '25%';
         case 'Good':
-            return '162px';
+            return '50%';
         case 'Strong':
-            return '243px';
+            return '75%';
         case 'Very Strong':
-            return '325px';
+            return '100%';
         }
 
         return '0px';
@@ -198,7 +198,6 @@ export default class PasswordStrength extends Vue {
         top: 96px;
         right: -3px;
         padding: 25px 20px;
-        opacity: 0.97;
         border: 1px solid rgb(193 193 193 / 30%);
         box-shadow: 0 4px 20px rgb(204 208 214 / 25%);
         border-radius: 6px;
@@ -242,6 +241,7 @@ export default class PasswordStrength extends Vue {
             line-height: 16px;
             color: #afb7c1;
             margin: 10px 0 0;
+            text-align: left;
         }
 
         &__rule-area {
diff --git a/web/satellite/src/components/common/VModal.vue b/web/satellite/src/components/common/VModal.vue
index 45d9eab18..8e4d3eaf5 100644
--- a/web/satellite/src/components/common/VModal.vue
+++ b/web/satellite/src/components/common/VModal.vue
@@ -52,17 +52,16 @@ export default class VModal extends Vue {
                 display: inline-block;
                 position: relative;
                 background: #fff;
-                border-radius: 20px;
+                border-radius: 10px;
                 box-shadow: 0 0 32px rgb(0 0 0 / 4%);
+                margin: 0 24px;
 
                 &__close {
-                    display: flex;
                     position: absolute;
-                    right: 30px;
-                    top: 30px;
-                    height: 24px;
-                    width: 24px;
+                    right: 24px;
+                    top: 24px;
                     cursor: pointer;
+                    opacity: 0.55;
                 }
             }
         }
diff --git a/web/satellite/src/components/modals/AddTeamMemberModal.vue b/web/satellite/src/components/modals/AddTeamMemberModal.vue
index 1498a97d9..5755c0fa0 100644
--- a/web/satellite/src/components/modals/AddTeamMemberModal.vue
+++ b/web/satellite/src/components/modals/AddTeamMemberModal.vue
@@ -7,16 +7,17 @@
             <div class="add-user">
                 <div class="add-user__main">
                     <div class="add-user__info-panel-container">
-                        <h2 class="add-user__info-panel-container__main-label-text">Add Team Member</h2>
+                        <h2 class="add-user__info-panel-container__title">Add Team Member</h2>
                         <img src="@/../static/images/team/addMember.jpg" alt="add team member image">
                     </div>
                     <div class="add-user__form-container">
+                        <h2 class="add-user__form-container__title">Add Team Member</h2>
                         <p v-if="!formError" class="add-user__form-container__common-label">Email Address</p>
                         <div v-if="formError" class="add-user__form-container__label">
                             <ErrorIcon alt="Red error icon" />
                             <p class="add-user__form-container__label__error">{{ formError }}</p>
                         </div>
-                        <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': isInputsGroupScrollable }">
+                        <div class="add-user__form-container__inputs-group">
                             <div
                                 v-for="(input, index) in inputs"
                                 :key="index"
@@ -46,14 +47,14 @@
                         <div class="add-user__form-container__button-container">
                             <VButton
                                 label="Cancel"
-                                width="205px"
+                                width="100%"
                                 height="48px"
                                 :on-press="closeModal"
                                 is-transparent="true"
                             />
                             <VButton
                                 label="Add Team Members"
-                                width="205px"
+                                width="100%"
                                 height="48px"
                                 :on-press="onAddUsersClick"
                                 :is-disabled="!isButtonActive"
@@ -257,10 +258,6 @@ export default class AddTeamMemberModal extends Vue {
         return location.host + RouteConfig.Register.path;
     }
 
-    public get isInputsGroupScrollable(): boolean {
-        return this.inputs.length > 4;
-    }
-
     /**
      * Removes error for selected input.
      */
@@ -293,14 +290,17 @@ export default class AddTeamMemberModal extends Vue {
         font-family: 'font_regular', sans-serif;
 
         &__main {
-            border-top-left-radius: 6px;
-            border-top-right-radius: 6px;
+            border-radius: 6px 6px 0 0;
             display: flex;
             align-items: flex-start;
             justify-content: center;
             background-color: #fff;
-            padding: 80px 20px 80px 30px;
-            width: calc(100% - 50px);
+            padding: 80px 24px;
+            width: calc(100% - 48px);
+
+            @media screen and (max-width: 950px) {
+                padding: 48px 24px;
+            }
         }
 
         &__info-panel-container {
@@ -310,7 +310,11 @@ export default class AddTeamMemberModal extends Vue {
             align-items: center;
             margin-right: 150px;
 
-            &__main-label-text {
+            @media screen and (max-width: 950px) {
+                display: none;
+            }
+
+            &__title {
                 font-family: 'font_bold', sans-serif;
                 font-size: 32px;
                 line-height: 29px;
@@ -330,24 +334,57 @@ export default class AddTeamMemberModal extends Vue {
             width: 100%;
             max-width: 600px;
 
+            @media screen and (max-width: 950px) {
+                max-width: unset;
+            }
+
+            &__title {
+                display: none;
+                font-family: 'font_bold', sans-serif;
+                font-size: 28px;
+                color: #384b65;
+                margin-bottom: 20px;
+                text-align: left;
+
+                @media screen and (max-width: 950px) {
+                    display: block;
+                }
+            }
+
             &__label {
                 display: flex;
-                flex-direction: row;
                 padding-left: 50px;
                 margin-bottom: 15px;
 
+                @media screen and (max-width: 950px) {
+                    padding: 0;
+                }
+
+                @media screen and (max-width: 550px) {
+
+                    svg {
+                        display: none;
+                    }
+                }
+
                 &__error {
-                    margin: 0;
-                    padding-left: 10px;
+                    margin-left: 10px;
                     color: #eb5757;
+                    text-align: left;
+
+                    @media screen and (max-width: 550px) {
+                        margin: 0;
+                    }
                 }
             }
 
             &__inputs-group {
-                max-height: 35vh;
-                overflow-y: hidden;
                 padding: 3px 50px 0;
 
+                @media screen and (max-width: 950px) {
+                    padding: 0;
+                }
+
                 &__item {
                     display: flex;
                     align-items: center;
@@ -395,15 +432,29 @@ export default class AddTeamMemberModal extends Vue {
                 line-height: 25px;
                 padding-left: 50px;
                 text-align: left;
+
+                @media screen and (max-width: 950px) {
+                    padding-left: unset;
+                }
             }
 
             &__button-container {
                 display: flex;
-                flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
                 margin-top: 30px;
                 padding: 0 80px 0 50px;
+                column-gap: 20px;
+
+                @media screen and (max-width: 950px) {
+                    padding: 0;
+                }
+
+                @media screen and (max-width: 420px) {
+                    flex-direction: column-reverse;
+                    row-gap: 10px;
+                    column-gap: unset;
+                }
             }
         }
     }
@@ -414,6 +465,10 @@ export default class AddTeamMemberModal extends Vue {
         justify-content: space-between;
         padding: 0 80px 0 50px;
 
+        @media screen and (max-width: 950px) {
+            padding: 0;
+        }
+
         &__item {
             display: flex;
             align-items: center;
@@ -477,12 +532,20 @@ export default class AddTeamMemberModal extends Vue {
         justify-content: flex-start;
         padding: 0 50px;
         align-items: center;
-        border-bottom-left-radius: 6px;
-        border-bottom-right-radius: 6px;
+        border-radius: 0 0 6px 6px;
+
+        @media screen and (max-width: 950px) {
+            height: unset;
+            padding: 24px;
+        }
 
         &__image {
             margin-right: 40px;
             min-width: 40px;
+
+            @media screen and (max-width: 500px) {
+                display: none;
+            }
         }
 
         &__text-area {
@@ -493,11 +556,22 @@ export default class AddTeamMemberModal extends Vue {
                 font-family: 'font_medium', sans-serif;
                 font-size: 16px;
                 text-align: left;
+
+                @media screen and (max-width: 500px) {
+                    font-size: 14px;
+                }
             }
         }
     }
 
-    .scrollable {
-        overflow-y: scroll;
+    ::v-deep .container {
+        padding: 0 10px;
+    }
+
+    @media screen and (max-width: 500px) {
+
+        ::v-deep .container {
+            padding: 0;
+        }
     }
 </style>
diff --git a/web/satellite/src/components/modals/ChangePasswordModal.vue b/web/satellite/src/components/modals/ChangePasswordModal.vue
index a705e52d4..0651c8003 100644
--- a/web/satellite/src/components/modals/ChangePasswordModal.vue
+++ b/web/satellite/src/components/modals/ChangePasswordModal.vue
@@ -12,7 +12,7 @@
                 <VInput
                     class="full-input"
                     label="Old Password"
-                    placeholder="Enter Old Password"
+                    placeholder="Old Password"
                     is-password="true"
                     :error="oldPasswordError"
                     @setData="setOldPassword"
@@ -21,7 +21,7 @@
                     <VInput
                         class="full-input"
                         label="New Password"
-                        placeholder="Enter New Password"
+                        placeholder="New Password"
                         is-password="true"
                         :error="newPasswordError"
                         @setData="setNewPassword"
@@ -44,14 +44,14 @@
                 <div class="change-password__buttons">
                     <VButton
                         label="Cancel"
-                        width="205px"
+                        width="100%"
                         height="48px"
                         :on-press="closeModal"
                         is-transparent="true"
                     />
                     <VButton
                         label="Update"
-                        width="205px"
+                        width="100%"
                         height="48px"
                         :on-press="onUpdateClick"
                     />
@@ -215,17 +215,34 @@ export default class ChangePasswordModal extends Vue {
         flex-direction: column;
         padding: 48px;
 
+        @media screen and (max-width: 600px) {
+            padding: 48px 24px;
+        }
+
         &__row {
             display: flex;
             align-items: center;
             margin-bottom: 20px;
 
+            @media screen and (max-width: 600px) {
+
+                svg {
+                    display: none;
+                }
+            }
+
             &__label {
                 font-family: 'font_bold', sans-serif;
                 font-size: 32px;
                 line-height: 60px;
                 color: #384b65;
                 margin: 0 0 0 32px;
+
+                @media screen and (max-width: 600px) {
+                    font-size: 24px;
+                    line-height: 28px;
+                    margin: 0;
+                }
             }
         }
 
@@ -235,6 +252,13 @@ export default class ChangePasswordModal extends Vue {
             align-items: center;
             margin-top: 32px;
             column-gap: 20px;
+
+            @media screen and (max-width: 600px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 10px;
+                margin-top: 15px;
+            }
         }
     }
 
@@ -246,4 +270,21 @@ export default class ChangePasswordModal extends Vue {
     .full-input {
         margin-bottom: 15px;
     }
+
+    @media screen and (max-width: 600px) {
+
+        ::v-deep .password-strength-container {
+            width: unset;
+            height: unset;
+
+            &__header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            &__rule-area__rule {
+                text-align: left;
+            }
+        }
+    }
 </style>
diff --git a/web/satellite/src/components/modals/CreateProjectModal.vue b/web/satellite/src/components/modals/CreateProjectModal.vue
index a87942a00..6598cf083 100644
--- a/web/satellite/src/components/modals/CreateProjectModal.vue
+++ b/web/satellite/src/components/modals/CreateProjectModal.vue
@@ -14,9 +14,9 @@
                     Create a Project
                 </h1>
                 <VInput
-                    label="Project Name"
+                    label="Project Name*"
                     additional-label="Up To 20 Characters"
-                    placeholder="Enter Project Name"
+                    placeholder="Project Name"
                     class="full-input"
                     is-limit-shown="true"
                     :current-limit="projectName.length"
@@ -25,9 +25,8 @@
                     @setData="setProjectName"
                 />
                 <VInput
-                    label="Description"
-                    placeholder="Enter Project Description"
-                    additional-label="Optional"
+                    label="Description - Optional"
+                    placeholder="Project Description"
                     class="full-input"
                     is-multiline="true"
                     height="100px"
@@ -38,16 +37,15 @@
                 />
                 <div class="modal__button-container">
                     <VButton
-                        class="modal__button-container__cancel"
                         label="Cancel"
-                        width="210px"
+                        width="100%"
                         height="48px"
                         :on-press="closeModal"
                         is-transparent="true"
                     />
                     <VButton
-                        label="Create Project +"
-                        width="210px"
+                        label="Create Project"
+                        width="100%"
                         height="48px"
                         :on-press="onCreateProjectClick"
                         :is-disabled="!projectName"
@@ -192,9 +190,19 @@ export default class CreateProjectModal extends Vue {
         flex-direction: column;
         font-family: 'font_regular', sans-serif;
 
+        @media screen and (max-width: 550px) {
+            width: calc(100% - 48px);
+            padding: 54px 24px 32px;
+        }
+
         &__icon {
             max-height: 154px;
             max-width: 118px;
+
+            @media screen and (max-width: 550px) {
+                max-height: 77px;
+                max-width: 59px;
+            }
         }
 
         &__title {
@@ -204,6 +212,12 @@ export default class CreateProjectModal extends Vue {
             color: #1b2533;
             margin-top: 40px;
             text-align: center;
+
+            @media screen and (max-width: 550px) {
+                margin-top: 16px;
+                font-size: 24px;
+                line-height: 31px;
+            }
         }
 
         &__info {
@@ -221,9 +235,13 @@ export default class CreateProjectModal extends Vue {
             align-items: center;
             justify-content: space-between;
             margin-top: 30px;
+            column-gap: 20px;
 
-            &__cancel {
-                margin-right: 20px;
+            @media screen and (max-width: 550px) {
+                margin-top: 20px;
+                column-gap: unset;
+                row-gap: 8px;
+                flex-direction: column-reverse;
             }
         }
 
@@ -250,4 +268,11 @@ export default class CreateProjectModal extends Vue {
     .full-input {
         margin-top: 20px;
     }
+
+    @media screen and (max-width: 550px) {
+
+        ::v-deep .add-label {
+            display: none;
+        }
+    }
 </style>
diff --git a/web/satellite/src/components/modals/CreateProjectPromptModal.vue b/web/satellite/src/components/modals/CreateProjectPromptModal.vue
index 8bfc44464..effb91a0b 100644
--- a/web/satellite/src/components/modals/CreateProjectPromptModal.vue
+++ b/web/satellite/src/components/modals/CreateProjectPromptModal.vue
@@ -16,13 +16,15 @@
                 <p class="modal__info">
                     Upgrade your Free Account to create<br>more projects and gain access to higher limits.
                 </p>
-                <VButton
-                    width="256px"
-                    height="56px"
-                    border-radius="8px"
-                    label="Upgrade to Pro Account ->"
-                    :on-press="onClick"
-                />
+                <div class="modal__btn">
+                    <VButton
+                        width="100%"
+                        height="56px"
+                        border-radius="8px"
+                        label="Upgrade to Pro Account ->"
+                        :on-press="onClick"
+                    />
+                </div>
             </div>
         </template>
     </VModal>
@@ -65,15 +67,29 @@ export default class CreateProjectPromptModal extends Vue {
 <style scoped lang="scss">
     .modal {
         width: 600px;
-        padding: 50px 0 65px;
+        padding: 54px 0 65px;
         display: flex;
         align-items: center;
         flex-direction: column;
         font-family: 'font_regular', sans-serif;
 
+        @media screen and (max-width: 768px) {
+            width: unset;
+            padding: 54px 24px 65px;
+        }
+
+        @media screen and (max-width: 450px) {
+            padding: 54px 12px 32px;
+        }
+
         &__icon {
             max-height: 154px;
             max-width: 118px;
+
+            @media screen and (max-width: 450px) {
+                max-height: 127px;
+                max-width: 97px;
+            }
         }
 
         &__title {
@@ -83,6 +99,12 @@ export default class CreateProjectPromptModal extends Vue {
             color: #1b2533;
             margin-top: 40px;
             text-align: center;
+
+            @media screen and (max-width: 450px) {
+                margin-top: 24px;
+                font-size: 24px;
+                line-height: 31px;
+            }
         }
 
         &__info {
@@ -92,6 +114,22 @@ export default class CreateProjectPromptModal extends Vue {
             text-align: center;
             color: #354049;
             margin: 15px 0 45px;
+
+            @media screen and (max-width: 450px) {
+                margin: 10px 0 24px;
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+
+        &__btn {
+            display: flex;
+            justify-content: center;
+            width: 256px;
+
+            @media screen and (max-width: 768px) {
+                width: 224px;
+            }
         }
     }
 </style>
diff --git a/web/satellite/src/components/modals/DisableMFAModal.vue b/web/satellite/src/components/modals/DisableMFAModal.vue
index d3aeb188f..ea920bd21 100644
--- a/web/satellite/src/components/modals/DisableMFAModal.vue
+++ b/web/satellite/src/components/modals/DisableMFAModal.vue
@@ -21,16 +21,15 @@
                 </p>
                 <div class="disable-mfa__buttons">
                     <VButton
-                        class="disable-mfa__buttons__cancel-button"
                         label="Cancel"
-                        width="50%"
+                        width="100%"
                         height="44px"
                         is-white="true"
                         :on-press="closeModal"
                     />
                     <VButton
                         label="Disable 2FA"
-                        width="50%"
+                        width="100%"
                         height="44px"
                         :on-press="disable"
                         :is-disabled="!(request.recoveryCode || request.passcode) || isLoading"
@@ -134,6 +133,10 @@ export default class DisableMFAModal extends Vue {
         align-items: center;
         font-family: 'font_regular', sans-serif;
 
+        @media screen and (max-width: 550px) {
+            padding: 48px 24px;
+        }
+
         &__title {
             font-family: 'font_bold', sans-serif;
             font-size: 28px;
@@ -141,6 +144,12 @@ export default class DisableMFAModal extends Vue {
             text-align: center;
             color: #000;
             margin: 0 0 30px;
+
+            @media screen and (max-width: 550px) {
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 15px;
+            }
         }
 
         &__subtitle {
@@ -149,6 +158,12 @@ export default class DisableMFAModal extends Vue {
             text-align: center;
             color: #000;
             margin: 0 0 45px;
+
+            @media screen and (max-width: 550px) {
+                font-size: 14px;
+                line-height: 18px;
+                margin-bottom: 20px;
+            }
         }
 
         &__confirm {
@@ -191,9 +206,13 @@ export default class DisableMFAModal extends Vue {
             align-items: center;
             width: 100%;
             margin-top: 30px;
+            column-gap: 15px;
 
-            &__cancel-button {
-                margin-right: 15px;
+            @media screen and (max-width: 550px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 10px;
+                margin-top: 15px;
             }
         }
     }
diff --git a/web/satellite/src/components/modals/EditProfileModal.vue b/web/satellite/src/components/modals/EditProfileModal.vue
index 439e858de..2bc9fd8c8 100644
--- a/web/satellite/src/components/modals/EditProfileModal.vue
+++ b/web/satellite/src/components/modals/EditProfileModal.vue
@@ -124,11 +124,19 @@ export default class EditProfileModal extends Vue {
         flex-direction: column;
         padding: 48px;
 
+        @media screen and (max-width: 400px) {
+            padding: 24px;
+        }
+
         &__row {
             display: flex;
             align-items: center;
             margin-bottom: 30px;
 
+            @media screen and (max-width: 400px) {
+                margin-bottom: 0;
+            }
+
             &__avatar {
                 width: 60px;
                 height: 60px;
@@ -139,6 +147,10 @@ export default class EditProfileModal extends Vue {
                 background: #e8eaf2;
                 margin-right: 20px;
 
+                @media screen and (max-width: 400px) {
+                    display: none;
+                }
+
                 &__letter {
                     font-family: 'font_medium', sans-serif;
                     font-size: 16px;
@@ -162,6 +174,13 @@ export default class EditProfileModal extends Vue {
             align-items: center;
             margin-top: 40px;
             column-gap: 20px;
+
+            @media screen and (max-width: 400px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 10px;
+                margin-top: 20px;
+            }
         }
     }
 </style>
diff --git a/web/satellite/src/components/modals/EnableMFAModal.vue b/web/satellite/src/components/modals/EnableMFAModal.vue
index 8dd991436..39817ed79 100644
--- a/web/satellite/src/components/modals/EnableMFAModal.vue
+++ b/web/satellite/src/components/modals/EnableMFAModal.vue
@@ -42,7 +42,6 @@
                 <div class="enable-mfa__buttons">
                     <VButton
                         v-if="!isCodes"
-                        class="cancel-button"
                         label="Cancel"
                         width="100%"
                         height="44px"
@@ -210,6 +209,10 @@ export default class EnableMFAModal extends Vue {
         align-items: center;
         font-family: 'font_regular', sans-serif;
 
+        @media screen and (max-width: 550px) {
+            padding: 48px 24px;
+        }
+
         &__title {
             font-family: 'font_bold', sans-serif;
             font-size: 28px;
@@ -217,6 +220,12 @@ export default class EnableMFAModal extends Vue {
             text-align: center;
             color: #000;
             margin: 0 0 30px;
+
+            @media screen and (max-width: 550px) {
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 15px;
+            }
         }
 
         &__subtitle {
@@ -225,6 +234,12 @@ export default class EnableMFAModal extends Vue {
             text-align: center;
             color: #000;
             margin: 0 0 45px;
+
+            @media screen and (max-width: 550px) {
+                font-size: 14px;
+                line-height: 18px;
+                margin-bottom: 20px;
+            }
         }
 
         &__scan {
@@ -236,6 +251,11 @@ export default class EnableMFAModal extends Vue {
             align-items: center;
             width: calc(100% - 50px);
 
+            @media screen and (max-width: 550px) {
+                padding: 15px;
+                width: calc(100% - 30px);
+            }
+
             &__title {
                 font-family: 'font_bold', sans-serif;
                 font-size: 16px;
@@ -243,6 +263,10 @@ export default class EnableMFAModal extends Vue {
                 text-align: center;
                 color: #000;
                 margin: 0 0 30px;
+
+                @media screen and (max-width: 550px) {
+                    margin-bottom: 15px;
+                }
             }
 
             &__subtitle {
@@ -261,6 +285,11 @@ export default class EnableMFAModal extends Vue {
                 &__canvas {
                     height: 200px !important;
                     width: 200px !important;
+
+                    @media screen and (max-width: 550px) {
+                        height: unset !important;
+                        width: 100% !important;
+                    }
                 }
             }
 
@@ -271,6 +300,7 @@ export default class EnableMFAModal extends Vue {
                 line-height: 25px;
                 text-align: center;
                 color: #000;
+                overflow-wrap: anywhere;
             }
         }
 
@@ -298,11 +328,15 @@ export default class EnableMFAModal extends Vue {
             align-items: center;
             width: 100%;
             margin-top: 30px;
-        }
-    }
+            column-gap: 20px;
 
-    .cancel-button {
-        margin-right: 15px;
+            @media screen and (max-width: 550px) {
+                flex-direction: column-reverse;
+                column-gap: unset;
+                row-gap: 10px;
+                margin-top: 20px;
+            }
+        }
     }
 
     .max-width {
diff --git a/web/satellite/src/components/modals/MFARecoveryCodesModal.vue b/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
index 2918a2fc8..a9a8c07ac 100644
--- a/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
+++ b/web/satellite/src/components/modals/MFARecoveryCodesModal.vue
@@ -71,6 +71,10 @@ export default class MFARecoveryCodesModal extends Vue {
         align-items: center;
         font-family: 'font_regular', sans-serif;
 
+        @media screen and (max-width: 550px) {
+            padding: 48px 24px;
+        }
+
         &__title {
             font-family: 'font_bold', sans-serif;
             font-size: 28px;
@@ -78,6 +82,12 @@ export default class MFARecoveryCodesModal extends Vue {
             text-align: center;
             color: #000;
             margin: 0 0 30px;
+
+            @media screen and (max-width: 550px) {
+                font-size: 24px;
+                line-height: 28px;
+                margin-bottom: 15px;
+            }
         }
 
         &__codes {
@@ -96,6 +106,12 @@ export default class MFARecoveryCodesModal extends Vue {
                 color: #000;
                 margin: 0 0 30px;
                 max-width: 485px;
+
+                @media screen and (max-width: 550px) {
+                    font-size: 14px;
+                    line-height: 18px;
+                    margin-bottom: 15px;
+                }
             }
         }