Merge pull request #6955 from opf/fix/wp-attributes-truncation

[29191] Fix wp attributes truncation

app/assets/stylesheets/content/_attributes_key_value.sass

@@ -37,10 +37,15 @@
     @extend .form--label
     @include grid-size(4)
     @include text-shortener
+    display: flex
     margin-bottom: 0.1875rem
     padding: 0.375rem 0 !important
     font-weight: bold
     align-self: center
+    // Ensure that the text is shortened while the help icon will be displayed
+    > wp-replacement-label
+      @include text-shortener
+      flex: 0 1 auto
 
   .attributes-key-value--value-container
     @include grid-content(8)

frontend/src/app/components/work-packages/wp-single-view/wp-single-view.html

@@ -47,9 +47,9 @@
             {{ descriptor.label }}
             <span class="required"
                   *ngIf="descriptor.field.required && descriptor.field.writable">*</span>
-            <attribute-help-text [attribute]="descriptor.name"
-                                 [attributeScope]="'WorkPackage'"></attribute-help-text>
           </wp-replacement-label>
+          <attribute-help-text [attribute]="descriptor.name"
+                               [attributeScope]="'WorkPackage'"></attribute-help-text>
         </div>
         <div class="attributes-key-value--value-container">
           <wp-edit-field [workPackageId]="workPackage.id"

frontend/src/app/components/wp-form-group/wp-attribute-group.template.html

@@ -10,8 +10,8 @@
           {{ descriptor.label }}
           <span class="required"
                 *ngIf="descriptor.field!.required && descriptor.field!.writable"> *</span>
-          <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'"></attribute-help-text>
         </wp-replacement-label>
+        <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'"></attribute-help-text>
       </div>
       <div *ngIf="!descriptor.multiple && descriptor.field"
            class="attributes-key-value--value-container">
@@ -33,8 +33,8 @@
         *ngIf="descriptor.multiple">
         <wp-replacement-label [fieldName]="descriptor.name">
           {{ descriptor.label }}
-          <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'"></attribute-help-text>
         </wp-replacement-label>
+        <attribute-help-text [attribute]="descriptor.name" [attributeScope]="'WorkPackage'"></attribute-help-text>
       </div>
       <div
         *ngIf="descriptor.multiple"