Merge pull request #162 from mrliptontea/issue-159/long-text-wrapping

Fix #159 wrapping long text in issue attributes

README.md

@@ -56,6 +56,11 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest (master):
+
+* Fixed #159: wrapping long text in issue attributes.
+* Fixed a "timeline" positioning in issue notes/changes.
+
 v2.9.1 (2020-02-22):
 
 * Merged fix #155: $.load function removed from jQuery.

src/sass/components/_issue.scss

@@ -88,7 +88,8 @@
       margin-bottom: $line-height-computed;
     }
 
-    > hr {
+    > hr,
+    .attribute > hr {
       @if $clean-issues {
         margin: $issue-padding 0;
       } @else {
@@ -126,7 +127,42 @@
     }
   }
 
-  .attributes {
+  @if $color-status {
+    .attributes td.status,
+    .attributes .attribute.status .value {
+      display: inline-block;
+      width: auto;
+      min-width: 1em;
+      margin-top: $issue-attribute-padding-v;
+      padding: 1px $table-cell-padding;
+      border-radius: $border-radius-base;
+      background-color: $status-default-bg;
+      color: $status-default-color;
+      font-size: $font-size-small;
+      font-weight: $font-weight-bold;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    @each $status, $status-colors in $status-colors-map {
+      &.#{$status} {
+        .attributes td.status,
+        .attributes .attribute.status .value {
+          background-color: map-get($status-colors, background);
+          color: map-get($status-colors, color);
+        }
+      }
+    }
+  }
+
+  @if $priority-icon {
+    .attributes td.priority,
+    .attribute.priority .value {
+      @include priority-icon-base;
+    }
+  }
+
+  table.attributes {
     width: 100%;
 
     th,
@@ -148,71 +184,70 @@
     }
 
     @media screen and (min-width: $screen-md-min) {
-      > tbody > tr {
-        > th,
-        > td {
-          width: 25%;
-        }
-      }
-    }
-
-    @media screen and (min-width: $screen-lg-min) {
-      width: auto;
-
       > tbody > tr {
         > th {
-          width: 14em;
+          width: $label-width;
         }
 
         > td {
+          min-width: $label-width;
+        }
+      }
+    }
+  }
+
+  div.attributes {
+    @if $css-grid-layout {
+      display: grid;
+      grid-gap: 0 $padding-side;
+      grid-template-columns: auto;
+
+      @media screen and (min-width: $screen-lg-min) {
+        grid-template-columns: repeat(2, minmax(auto, max-content));
+
+        .attribute .value {
+          min-width: $label-width;
+        }
+      }
+
+      .splitcontent {
+        display: contents;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      .splitcontentleft {
+        width: auto;
+        padding-right: 0;
+        padding-left: 0;
+        float: none;
+      }
+    } @else {
+      @media screen and (min-width: $screen-lg-min) {
+        .splitcontentleft {
           width: auto;
-          min-width: 16em;
+        }
+
+        .attribute .value {
+          min-width: $label-width;
         }
       }
     }
   }
 
-  @if $color-status {
+  .splitcontent {
-    .attributes td.status,
+    .attribute {
-    .attribute.status .value {
+      padding-left: $label-width;
-      display: inline-block;
-      width: auto;
-      min-width: 1em;
-      margin-top: $issue-attribute-padding-v;
-      padding: 1px $table-cell-padding;
-      border-radius: $border-radius-base;
-      background-color: $status-default-bg;
-      color: $status-default-color;
-      font-size: $font-size-small;
-      font-weight: $font-weight-bold;
-      text-align: center;
-      text-transform: uppercase;
-    }
 
-    @each $status, $status-colors in $status-colors-map {
+      .label {
-      &.#{$status} {
+        width: $label-width;
-        .attributes td.status,
+        margin-left: -$label-width;
-        .attribute.status .value {
-          background-color: map-get($status-colors, background);
-          color: map-get($status-colors, color);
-        }
       }
     }
   }
 
-  @if $priority-icon {
-    .attributes td.priority,
-    .attribute.priority .value {
-      @include priority-icon-base;
-    }
-  }
-
-  .splitcontentleft {
-    @media screen and (min-width: $screen-lg-min) {
-      width: auto;
-    }
-  }
-
   .attribute {
     @extend %clearfix;
 
@@ -222,21 +257,20 @@
     }
 
     .label {
-      width: 25%;
+      box-sizing: border-box;
       float: left;
       color: $gray-700;
-
-      @media screen and (min-width: $screen-lg-min) {
-        width: 14em;
-      }
     }
 
     .value {
       color: $gray-950;
 
-      @media screen and (min-width: $screen-lg-min) {
+      &:empty::after {
-        width: auto;
+        content: "-";
-        min-width: 14em + 16em;
+      }
+
+      *:last-child {
+        margin-bottom: 0;
       }
     }
   }
@@ -423,7 +457,7 @@ div.thumbnails {
 
 .journal {
   position: relative;
-  margin-bottom: $line-height-computed + 2px * 2;
+  margin-bottom: $line-height-computed;
 
   @if $use-gravatars {
     margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
@@ -434,10 +468,10 @@ div.thumbnails {
     display: block;
     position: absolute;
     z-index: -1;
-    top: -($line-height-computed + 2px);
+    top: -($line-height-computed - 1px);
     left: 22px;
     width: 4px;
-    height: $line-height-computed;
+    height: $line-height-computed - 2px;
     background-color: darken($body-bg, 5%);
   }