show truncated emails in all submissions table on hover

opentech/apply/funds/templates/funds/tables/table.html

@@ -27,9 +27,12 @@
                         </td>
                         <td>
                             <ul class="list list--no-margin">
-                            {% for review in row.record.reviews.all %}
-                                <li class="list__item list__item--reviewer"><strong>{{ review.author }}</strong> <span>{{ review.get_recommendation_display }}</span></li>
-                            {% endfor %}
+                                {% for review in row.record.reviews.all %}
+                                    <li class="list__item list__item--reviewer">
+                                        <span class="list__item--reviewer-name">{{ review.author }}</span>
+                                        <span class="list__item list__item--reviewer-outcome">{{ review.get_recommendation_display }}</span>
+                                    </li>
+                                {% endfor %}
                             </ul>
                         </td>
                     </tr>

opentech/static_src/src/sass/apply/components/_list.scss

 .list {
+    $root: &;
+
     &--no-margin {
         margin: 0;
     }
@@ -8,11 +10,30 @@
             display: flex;
             justify-content: space-between;
             max-width: 150px;
+        }
+
+        &--reviewer-name {
+            max-width: 100px;
+            overflow: hidden;
+            font-weight: $weight--bold;
+            text-overflow: ellipsis;
 
-            span {
-                font-weight: $weight--normal;
-                color: $color--tomato;
+            // show truncated emails on hover
+            &:hover {
+                position: absolute;
+                max-width: initial;
+                overflow: visible;
+                background-color: #f3fafe;
+
+                + #{$root}__item--reviewer-outcome {
+                    width: 100%;
+                    text-align: right;
+                }
             }
         }
+
+        &--reviewer-outcome {
+            color: $color--tomato;
+        }
     }
 }