From a21a4f26b3b914c9e808ae03bbe3befbf27b8e09 Mon Sep 17 00:00:00 2001
From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com>
Date: Mon, 24 Oct 2022 07:17:55 +0200
Subject: [PATCH] [44472] Modal dialogues - leftover issues from WP 43842
 (#11439)

* fix spacing issuesw in summary of invite user modal

* fix spacing issued for onboarding video modal

* adding correct classes for descriptions in summary component in invite user modal
---
 .../summary/summary.component.html            | 22 ++++++++++---------
 .../summary/summary.component.sass            |  8 +++++--
 .../modal/modal-wrapper-augment.service.ts    |  2 +-
 .../openproject/_onboarding.sass              |  2 ++
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/features/invite-user-modal/summary/summary.component.html b/frontend/src/app/features/invite-user-modal/summary/summary.component.html
index 7316591a0e..40e3294da2 100644
--- a/frontend/src/app/features/invite-user-modal/summary/summary.component.html
+++ b/frontend/src/app/features/invite-user-modal/summary/summary.component.html
@@ -8,22 +8,24 @@
   <div class="spot-divider"></div>
 
   <div class="spot-modal--body spot-container">
+
     <spot-form-field [label]="text.projectLabel">
-      <p slot="input">{{ project.name }}</p>
+      <p slot="input" class="spot-body-small op-ium-summary--details">{{ project.name }}</p>
     </spot-form-field>
-    <div class="op-ium-summary__row">
-      <spot-form-field [label]="text.principalLabel[type]">
-        <p slot="input">{{ principal?.name }}</p>
-      </spot-form-field>
-      <spot-form-field [label]="text.roleLabel()">
-        <p slot="input">{{ role.name }}</p>
-      </spot-form-field>
-    </div>
+
+    <spot-form-field [label]="text.principalLabel[type]">
+      <p slot="input" class="spot-body-small op-ium-summary--details">{{ principal?.name }}</p>
+    </spot-form-field>
+  
+    <spot-form-field [label]="text.roleLabel()">
+      <p slot="input" class="spot-body-small op-ium-summary--details">{{ role.name }}</p>
+    </spot-form-field>
+
     <spot-form-field
       [label]="text.messageLabel"
       *ngIf="type !== PrincipalType.Placeholder && message"
     >
-      <p slot="input" class="op-ium-summary-message">{{ message }}</p>
+      <p slot="input" class="spot-body-small op-ium-summary--message">{{ message }}</p>
     </spot-form-field>
   </div>
 
diff --git a/frontend/src/app/features/invite-user-modal/summary/summary.component.sass b/frontend/src/app/features/invite-user-modal/summary/summary.component.sass
index c87ea89e47..2ef72dc0c3 100644
--- a/frontend/src/app/features/invite-user-modal/summary/summary.component.sass
+++ b/frontend/src/app/features/invite-user-modal/summary/summary.component.sass
@@ -1,2 +1,6 @@
-.op-ium-summary-message
-  white-space: pre-wrap 
+.op-ium-summary
+  &--message
+    white-space: pre-wrap 
+
+  &--details 
+    margin-bottom: 0
diff --git a/frontend/src/app/shared/components/modal/modal-wrapper-augment.service.ts b/frontend/src/app/shared/components/modal/modal-wrapper-augment.service.ts
index bb669391d5..e6cea7faab 100644
--- a/frontend/src/app/shared/components/modal/modal-wrapper-augment.service.ts
+++ b/frontend/src/app/shared/components/modal/modal-wrapper-augment.service.ts
@@ -99,7 +99,7 @@ export class OpModalWrapperAugmentService {
   }
 
   private appendIframe(body:JQuery<HTMLElement>, url:string) {
-    const iframe = jQuery('<iframe frameborder="0" height="400" allowfullscreen>></iframe>');
+    const iframe = jQuery('<iframe frameborder="0" height="350" allowfullscreen>></iframe>');
     iframe.attr('src', url);
 
     body.find(iframeSelector).append(iframe);
diff --git a/frontend/src/global_styles/openproject/_onboarding.sass b/frontend/src/global_styles/openproject/_onboarding.sass
index 19b71c7e16..08a31aff24 100644
--- a/frontend/src/global_styles/openproject/_onboarding.sass
+++ b/frontend/src/global_styles/openproject/_onboarding.sass
@@ -31,9 +31,11 @@
     display: flex
     justify-content: space-between
     flex-direction: column
+    margin-bottom: 0
 
     .onboarding--video-text
       line-height: 1.25
+      margin-bottom: 1.25rem
 
     .onboarding--video
       align-self: center