made sure not only the title is truncated but other fields in details pane too

app/assets/stylesheets/content/_work_packages.sass

@@ -40,10 +40,26 @@
   font-size: 1.125rem
   font-weight: bold
 
+
+div[class*='work-packages--details--']
+  width: 100%
   .inplace-edit--read-value
+    .dynamic-attribute
+      width: 100%
+
     span          
       overflow: hidden
       text-overflow: ellipsis
+      display: block
+
+      p
+        overflow: inherit
+        text-overflow: inherit
+
+      a
+        overflow: inherit
+        text-overflow: inherit
+        display: inherit
 
 .work-packages--details--subject
   @include grid-content

frontend/app/templates/components/inplace_editor/display/dynamic.html

@@ -1,4 +1,5 @@
 <work-package-dynamic-attribute
     html-element="displayPaneController.getDynamicDirectiveName()"
-    work-package="displayPaneController.getWorkPackage()">
+    work-package="displayPaneController.getWorkPackage()"
+    class="dynamic-attribute">
 </work-package-dynamic-attribute>

frontend/app/templates/work_packages/field.html

@@ -1,4 +1,4 @@
-<div class="work-package-field medium-12 work-packages--details--{{ fieldController.field }}">
+<div class="work-package-field work-packages--details--{{ fieldController.field }}">
     <inplace-editor-main-pane>
       <inplace-editor-display-pane></inplace-editor-display-pane>
       <inplace-editor-edit-pane ng-if="fieldController.isEditable()"></inplace-editor-edit-pane>