Improve detailed contestant view style.

Author: veluca93

cmsranking/static/Ranking.css

@@ -913,43 +913,31 @@ abbr {
     min-height: 242px;
 }
 
-#UserDetail_f_name,
-#UserDetail_l_name,
-#UserDetail_team,
-#UserDetail_flag {
-    position: absolute;
-    right: 470px;
+#UserDetail_summary {
+    display: flex;
+    flex-direction: column;
     font-size: 2em;
     line-height: 1.5em;
-    max-width: 63px;
-}
-
-#UserDetail_f_name {
-    top: 0;
-}
-
-#UserDetail_l_name {
-    top: 1.5em;
+    text-align: center;
 }
 
-#UserDetail_team {
-    bottom: 100px;
+#UserDetail_spacer {
+    flex-grow: 1;
+    min-height: 2em;
 }
 
 #UserDetail_flag {
-    bottom: 0;
+    max-width: 144px;
+    max-height: 96px;
+    object-fit: contain;
+    align-self: center;
 }
 
 #UserDetail_face {
-    position: absolute;
-    top: 0;
-    left: 0;
     max-width: 160px;
     max-height: 240px;
-}
-
-#UserDetail_flag {
-    margin: -1px;
+    object-fit: contain;
+    align-self: center;
 }
 
 #UserDetail_flag.hidden {
@@ -958,7 +946,6 @@ abbr {
 
 #UserDetail_navigator {
     width: 450px;
-    margin-left: 470px;
 }
 
 #UserDetail_navigator table {

cmsranking/static/Ranking.html

@@ -73,15 +73,18 @@
         <div id="UserDetail_bg">
             <div id="UserDetail">
                 <img id="UserDetail_close" src="img/close.png" alt="Close"/>
-                <div id="UserDetail_header">
-                    <div id="UserDetail_summary">
+                <div id="UserDetail_header" style="display: flex;">
+                    <div id="UserDetail_summary" style="flex-grow: 1">
+                       <div>
+                           <span id="UserDetail_f_name"></span>
+                           <span id="UserDetail_l_name"></span>
+                       </div>
                         <img id="UserDetail_face" src="" alt="Face"/>
-                        <div id="UserDetail_f_name"></div>
-                        <div id="UserDetail_l_name"></div>
+                       <div id="UserDetail_spacer"></div>
                         <div id="UserDetail_team"></div>
                         <img id="UserDetail_flag" src="" alt="Flag"/>
                     </div>
-                    <div id="UserDetail_navigator">
+                    <div id="UserDetail_navigator" style="flex-grow: 1">
                         <table>
                             <col class="name"/>
                             <col class="score"/>