Fix spacings for relations tab on wp details page (#11072)

* Fix spacings for relations tab on wp details page

The details tab of the relations page had too much whitespace up top.
This commit removes that whitespace, it reduces a bit of HTML nesting
by removing unnecessary extra `div` wraps, and it hides all empty
`ndc-dynamic` elements by default, as they were still taking up 16px of
space even though nothing was being rendered in them.

Adresses https://community.openproject.org/work_packages/41845/activity#activity-22

* Visually center align spacing of attribute group header button

frontend/src/app/features/work-packages/components/wp-relations/wp-relations-group/wp-relations-group.component.ts

@@ -28,7 +28,7 @@
 
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import {
-  Component, ElementRef, EventEmitter, Input, Output, ViewChild,
+  Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 
@@ -37,6 +37,8 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
   templateUrl: './wp-relations-group.template.html',
 })
 export class WorkPackageRelationsGroupComponent {
+  @HostBinding('class.attributes-group') className = true;
+
   @Input() public relatedWorkPackages:WorkPackageResource[];
 
   @Input() public workPackage:WorkPackageResource;

frontend/src/app/features/work-packages/components/wp-relations/wp-relations-group/wp-relations-group.template.html

@@ -1,30 +1,34 @@
-<div class="attributes-group">
-  <div class="attributes-group--header">
-    <div class="attributes-group--header-container">
-      <h3 class="attributes-group--header-text relation-group--header"
-          [textContent]="header">
-      </h3>
-    </div>
-    <div class="attributes-group--header-toggle"
-         *ngIf="firstGroup">
-      <button
-          #wpRelationGroupByToggler
-          id="wp-relation-group-by-toggle"
-          type="button"
-          class="button -small -transparent -with-icon icon-group-by icon-small hide-when-print"
-          (click)="toggleButton()"
-      >
-        <span [textContent]="togglerText"></span>
-      </button>
-    </div>
+<div class="attributes-group--header">
+  <div class="attributes-group--header-container">
+    <h3
+      class="attributes-group--header-text relation-group--header"
+      [textContent]="header"
+    ></h3>
   </div>
-
-  <div class="content"
-       *ngIf="relatedWorkPackages">
-    <wp-relation-row
-        *ngFor="let relatedWorkPackage of relatedWorkPackages"
-        [workPackage]="workPackage"
-        [groupByWorkPackageType]="groupByWorkPackageType"
-        [relatedWorkPackage]="relatedWorkPackage"></wp-relation-row>
+  <div
+    class="attributes-group--header-toggle"
+    *ngIf="firstGroup"
+  >
+    <button
+      #wpRelationGroupByToggler
+      id="wp-relation-group-by-toggle"
+      type="button"
+      class="button -small -transparent -with-icon icon-group-by icon-small hide-when-print"
+      (click)="toggleButton()"
+    >
+      <span [textContent]="togglerText"></span>
+    </button>
   </div>
 </div>
+
+<div
+  class="content"
+  *ngIf="relatedWorkPackages"
+>
+  <wp-relation-row
+    *ngFor="let relatedWorkPackage of relatedWorkPackages"
+    [workPackage]="workPackage"
+    [groupByWorkPackageType]="groupByWorkPackageType"
+    [relatedWorkPackage]="relatedWorkPackage"
+  ></wp-relation-row>
+</div>

frontend/src/app/features/work-packages/components/wp-relations/wp-relations.template.html

@@ -1,28 +1,33 @@
-<div class="loading-indicator--location"
-     data-indicator-name="relation-groups">
-
-  <div *ngIf="!relationsPresent">
-    <div class="attributes-group--header">
-      <div class="attributes-group--header-container">
-        <h3 class="attributes-group--header-text"
-            [textContent]="text.relations_header">
-        </h3>
-      </div>
+<div
+  class="loading-indicator--location"
+  data-indicator-name="relation-groups"
+>
+  <div
+    *ngIf="!relationsPresent"
+    class="attributes-group--header"
+  >
+    <div class="attributes-group--header-container">
+      <h3
+        class="attributes-group--header-text"
+        [textContent]="text.relations_header"
+      ></h3>
     </div>
   </div>
 
+  <wp-relations-group
+    [header]="type"
+    *ngFor="let type of relationGroupKeys; let first = first"
+    [groupByWorkPackageType]="groupByWorkPackageType"
+    (onToggleGroupBy)="toggleGroupBy()"
+    [firstGroup]="first"
+    [relatedWorkPackages]="relationGroups[type]"
+    [workPackage]="workPackage"
+  ></wp-relations-group>
 
-  <div *ngFor="let type of relationGroupKeys; let first = first">
-    <wp-relations-group [header]="type"
-                        [groupByWorkPackageType]="groupByWorkPackageType"
-                        (onToggleGroupBy)="toggleGroupBy()"
-                        [firstGroup]="first"
-                        [relatedWorkPackages]="relationGroups[type]"
-                        [workPackage]="workPackage"></wp-relations-group>
-  </div>
-  <wp-relations-create *ngIf="canAddRelation"
-                       [workPackage]="workPackage">
-  </wp-relations-create>
+  <wp-relations-create
+    *ngIf="canAddRelation"
+    [workPackage]="workPackage"
+  ></wp-relations-create>
 
   <wp-relations-hierarchy [workPackage]="workPackage"></wp-relations-hierarchy>
 </div>

frontend/src/global_styles/content/_attributes_group.sass

@@ -59,7 +59,7 @@
   overflow-y: hidden
 
   .button
-    margin: 0 0 8px 0
+    margin: 0 0 4px 0
 
 .attributes-group--icon-indented-text
   display: grid

frontend/src/global_styles/openproject/_index.sass

@@ -8,3 +8,5 @@
 @import mixins
 @import onboarding
 @import scm
+
+@import ndc-dynamic

frontend/src/global_styles/openproject/_ndc-dynamic.sass

@@ -0,0 +1,3 @@
+ndc-dynamic
+  &:empty
+    display: none