Problems: truncate long problem description

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -160,9 +160,11 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
             }
           </div>
           {problem.comments &&
-            <div className="problem-description">
+            <div className="problem-description-row">
-              <span className="description-label">Description:&nbsp;</span>
+              <div className="problem-description">
-              <span>{problem.comments}</span>
+                <span className="description-label">Description:&nbsp;</span>
+                <span>{problem.comments}</span>
+              </div>
             </div>
           }
           {problem.tags && problem.tags.length > 0 &&

src/sass/_panel-problems.scss

@@ -251,10 +251,30 @@
         flex-direction: column;
       }
 
-      .description-label {
+      .problem-description-row {
-        font-weight: 500;
+
-        font-style: italic;
+        .problem-description {
-        color: $text-muted;
+          position: relative;
+          height: 4.5rem;
+          overflow: hidden;
+
+          &:after {
+            content: "";
+            text-align: right;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 70%;
+            height: 1.5rem;
+            background: linear-gradient(to right, rgba($problem-details-background, 0), rgba($problem-details-background, 1) 50%);
+          }
+        }
+
+        .description-label {
+          font-weight: 500;
+          font-style: italic;
+          color: $text-muted;
+        }
       }
 
       .problem-age {