Make problem badges a bit wider by default so they have the same size.

Author: nickygerritsen

webapp/public/style_domjudge.css

@@ -618,7 +618,9 @@ tr.ignore td, td.ignore, span.ignore {
 }
 
 .problem-badge {
-    font-size: 100%;
+    --badge-padding-x: 0.5em;
+    font-size: 1em;
+    min-width: 2em;
 }
 
 .tooltip .tooltip-inner {

webapp/src/Twig/TwigExtension.php

@@ -1085,7 +1085,7 @@ public function problemBadge(ContestProblem $problem): string
         // Pick the foreground text color based on the background color.
         $foreground = ($background[0] + $background[1] + $background[2] > 450) ? '#000000' : '#ffffff';
         return sprintf(
-            '<span class="badge problem-badge" style="background-color: %s; min-width: 28px; border: 1px solid %s"><span style="color: %s;">%s</span></span>',
+            '<span class="badge problem-badge" style="background-color: %s; border: 1px solid %s"><span style="color: %s;">%s</span></span>',
             $rgb,
             $border,
             $foreground,