Update mobile scoreboard.

- Make team names not fall of the screen by calculating their max width.
- Make non mobile scoreboard not left-aligned.
- Add a bit of margin to the header.
- Make the problem boxes right aligned.
- Change the card at the top to show 2 lines (name + contestt time) on mobile.

Author: nickygerritsen

webapp/public/style_domjudge.css

@@ -219,6 +219,7 @@ del {
     display: block;
     overflow: hidden;
 }
+
 .toolong:after {
     content: "";
     width: 30%;
@@ -675,4 +676,4 @@ blockquote {
     -ms-transform:rotate(-35deg);
     -o-transform:rotate(-35deg);
     transform:rotate(-35deg);
-}
+}

webapp/templates/partials/scoreboard.html.twig

@@ -18,31 +18,37 @@
     {% endif %}
 
     <div class="card" {% if refreshstop is defined %}data-ajax-refresh-stop="1"{% endif %}>
-        <div class="card-header" style="font-family: Roboto, sans-serif; display: flex;">
-            <span style="font-weight: bold;">{{ current_contest.name }}</span>
-            <span id="contesttimer">
-                {% if scoreboard is null %}
-                    {{ current_contest | printContestStart }}
-                {% elseif scoreboard.freezeData.showFinal(jury) %}
-                    {% if current_contest.finalizetime is empty %}
-                        preliminary results - not final
-                    {% else %}
-                        final standings
-                    {% endif %}
-                {% elseif scoreboard.freezeData.stopped %}
-                    contest over, waiting for results
-                {% elseif static %}
-                    {% set now = 'now'|date('U') %}
-                    {{ current_contest.starttime | printelapsedminutes(now) }}
-                {% else %}
-                    {% if current_contest.freezeData.started %}
-                        started:
+        <div class="card-header" style="font-family: Roboto, sans-serif;">
+            <div class="row">
+                <div class="col-md-6 col-12">
+                    <span style="font-weight: bold;">{{ current_contest.name }}</span>
+                </div>
+                <div class="col-md-6 col-12 text-md-end text-start">
+                    <span id="contesttimer">
+                    {% if scoreboard is null %}
+                        {{ current_contest | printContestStart }}
+                    {% elseif scoreboard.freezeData.showFinal(jury) %}
+                        {% if current_contest.finalizetime is empty %}
+                            preliminary results - not final
+                        {% else %}
+                            final standings
+                        {% endif %}
+                    {% elseif scoreboard.freezeData.stopped %}
+                        contest over, waiting for results
+                    {% elseif static %}
+                        {% set now = 'now'|date('U') %}
+                        {{ current_contest.starttime | printelapsedminutes(now) }}
                     {% else %}
-                        starts:
+                        {% if current_contest.freezeData.started %}
+                            started:
+                        {% else %}
+                            starts:
+                        {% endif %}
+                        {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
                     {% endif %}
-                    {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
-                {% endif %}
-            </span>
+                </span>
+                </div>
+            </div>
         </div>
 
         {% if static %}