Merge branch 'master' of https://gitlab.kwant-project.org/works-on-my-machine/zesje into develop

client/views/Grade.jsx

@@ -276,9 +276,13 @@ class Grade extends React.Component {
                           renderSuggestion={(submission) => {
                             const stud = submission.student
                             return (
-                              <div>
-                                <b>{`${stud.firstName} ${stud.lastName}`}</b>
-                                <i style={{float: 'right'}}>({stud.id})</i>
+                              <div className='flex-parent'>
+                                <b className='flex-child truncated'>
+                                  {`${stud.firstName} ${stud.lastName}`}
+                                </b>
+                                <i className='flex-child fixed'>
+                                  ({stud.id})
+                                </i>
                               </div>
                             )
                           }}

client/views/grade/Grade.css

 .box.is-graded {
     box-shadow: 0px 0px 6px #23d160, 0 0 0 1px rgba(10, 10, 10, 0.1);
 }
+
+.flex-parent {
+    display: flex;
+    align-items: center;
+}
+
+.flex-child.truncated {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flex-child.fixed {
+    white-space: nowrap;
+}