Merge pull request #6971 from opf/fix/wp-attributes-linebreak

[29346] Fix wp attributes linebreak on split view

app/assets/stylesheets/content/_attributes_key_value.sass

@@ -27,19 +27,17 @@
 //++
 
 .attributes-key-value
-  @include grid-block
-  @include grid-layout(2)
-  @include grid-visible-overflow
+  display: flex
+  flex-wrap: wrap
   font-size: 0.875rem
   line-height: 1.6
 
   .attributes-key-value--key
     @extend .form--label
-    @include grid-size(4)
-    @include text-shortener
     display: flex
+    flex: 1 0 35%
     margin-bottom: 0.1875rem
-    padding: 0.375rem 0 !important
+    padding: 0.375rem 0
     font-weight: bold
     align-self: center
     // Ensure that the text is shortened while the help icon will be displayed
@@ -48,12 +46,11 @@
       flex: 0 1 auto
 
   .attributes-key-value--value-container
-    @include grid-content(8)
-    @include grid-visible-overflow
     display: flex
+    flex: 1 0 65%
     margin-bottom: 0.1875rem
-    padding: 0 !important
     align-self: center
+    overflow: hidden
 
     &.not-editable
       padding: 6px

app/assets/stylesheets/content/work_packages/single_view/_single_view.sass

@@ -194,11 +194,9 @@ i
   // (b) ugly content wrap (e.g. in the label)
   // These values are what matches best at the moment. So be careful when changing them.
   .attributes-key-value--key
-    flex: 0 0 45%
-    max-width: 45%
+    flex: 1 0 45%
   .attributes-key-value--value-container
-    flex: 0 0 55%
-    max-width: 55%
+    flex: 1 0 55%
 
 // Implement two column layout for WP full screen view
 @media screen and (min-width: 92rem), print

app/assets/stylesheets/layout/work_packages/_mobile.sass

@@ -86,7 +86,6 @@
 
     .attributes-key-value--key,
     .attributes-key-value--value-container
-      @include grid-size(6)
       font-size: 1rem
       margin-bottom: 20px
 
@@ -97,6 +96,7 @@
         border: none
 
     .attributes-key-value--key
+      flex-basis: 30% !important
       padding: 0 !important
 
     .work-packages--panel-inner > .attributes-group:first-child