Merge pull request #7962 from opf/fix/31896-Text-in-custom-field-not-correctly-displayed

[31896] Text in custom field not correctly displayed

app/assets/stylesheets/content/_autocomplete.sass

@@ -175,7 +175,7 @@ mark.ui-autocomplete-match
   height: initial !important
   min-height: initial !important
 
-  .wp-table--cell-container & .ng-value-label
+  .ng-value-label
     display: initial !important
 
 // Ensure dropdown is above modals

app/assets/stylesheets/content/work_packages/_table_content.sass

@@ -84,6 +84,9 @@
   td
     padding: 0 !important
 
+  .group--value
+    @include text-shortener
+
 // Shrink column of details / inline-create icons
 .wp-table--configuration-modal--trigger
   width: 60px
@@ -124,6 +127,7 @@ html:not(.-browser-mobile)
   @extend .ellipsis
   display: inline-block
   vertical-align: middle
+  width: 100%
   .wp-table--cell-td.-editing &
     display: block
     width: initial !important

app/assets/stylesheets/content/work_packages/inplace_editing/_display_fields.sass

@@ -54,10 +54,20 @@
   .custom-option
     @include text-shortener
     white-space: normal
+
     &:not(.-multiple-lines)
       display: inline
       white-space: nowrap
 
+      // Leave space for the badge
+      &:not(:only-child)
+        max-width: 90%
+        display: inline-block
+        vertical-align: middle
+        line-height: 32px
+        &:first-of-type
+          padding-right: 5px
+
   &.split-time-field
     white-space: nowrap
 

frontend/src/app/modules/grids/widgets/custom-text/custom-text.component.ts

@@ -75,7 +75,7 @@ export class WidgetCustomTextComponent extends AbstractWidgetComponent implement
   }
 
   public get inplaceEditClasses() {
-    let classes = 'inplace-editing--container inline-edit--display-field inline-edit--display-field -editable';
+    let classes = 'inplace-editing--container inline-edit--display-field -editable';
 
     if (this.textEmpty) {
       classes += ' -placeholder';