Merge pull request #2315 from ORCID/fix-error-message-wrapping

fix email modal error message wrapping
ORCID · Jul 25, 2024 · 72e0b94 · 72e0b94
2 parents f54ed2e + 7bb25f7
commit 72e0b94
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html
@@ -145,7 +145,10 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
               >
             </button>
           </div>
-          <div class="row actions-wrapper">
+          <div
+            class="row actions-wrapper"
+            [ngClass]="{ 'actions-wrapper-mobile': isMobile }"
+          >
             <div
               class="actions-sub-wrapper"
               *ngIf="showNonVerifiedData(email.putCode)"

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss
@@ -36,17 +36,21 @@ mat-form-field {
 }
 
 .actions-wrapper {
-  width: 51%;
+  width: 100%;
   margin-left: 48px;
+  margin-right: 255px;
   margin-top: 3px;
   line-height: 21px;
 }
 
+.actions-wrapper-mobile {
+  margin-right: 150px !important;
+}
+
 .actions-wrapper,
 .actions-sub-wrapper {
   display: flex;
   flex-wrap: nowrap;
-  flex-shrink: 0;
   justify-content: space-between;
 
   .actions-sub-wrapper {