Fix submission css

resources/submission.scss

@@ -49,11 +49,14 @@
         font-size: 1.2em;
         margin-bottom: 10px;
 
-        .name {
+        .sub-user {
+            overflow-wrap: break-word;
+        }
+        .sub-problem {
             font-weight: 700;
         }
 
-        .name:hover {
+        .sub-problem:hover {
             text-decoration: underline;
         }
     }
@@ -89,6 +92,8 @@
         border-radius: 50%;
         overflow: hidden;
         margin-right: 15px;
+        display: flex;
+        align-items: center;
 
         img {
             width: 100%;

templates/submission/row.html

@@ -4,10 +4,12 @@
 </div>
 <div class="sub-details">
   <div class="sub-info{% if submission.status == 'G' %} sub-info-grading{% endif %}">
-    {{ link_user(submission.user) }}
+    <div class="sub-user" style="max-width: {{50 if show_problem else 100}}%">
+      {{ link_user(submission.user) }}
+    </div>
     {% if show_problem %}
       <span>—</span>
-      <div class="name"><a href="{{ url('problem_detail', submission.problem.code) }}">{{ problem_name }}</a></div>
+      <div class="sub-problem"><a href="{{ url('problem_detail', submission.problem.code) }}">{{ problem_name }}</a></div>
     {% endif %}
   </div>
   <div class="sub-result">