[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

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>
 

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

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);

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