Button alignment in row

mlcommons · Jan 30, 2024 · 610ef10 · 610ef10
1 parent 6edd253
commit 610ef10
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/src/coffee/templates/_sut_card.html b/src/coffee/templates/_sut_card.html
@@ -16,25 +16,25 @@ <h2 class="mb-0">{{ stars_description[benchmark_score.stars() | round | int]["ra
     </div>
     <div class="row">
         <div class="mt-5 mb-1 border rounded-4">
-            <div class="row py-3 border-bottom rounded-top-4 dropdown-title-bar">
+            <div class="row px-3 py-4 border-bottom rounded-top-4 dropdown-title-bar">
                 <div class="col">Test</div>
                 <div class="col">Rating</div>
                 <div class="col">Explanation</div>
             </div>
         {% for harm_score in benchmark_score.harm_scores %}
-            <div class="row py-3{% if not loop.last %} border-bottom{% endif %}">
+            <div class="row p-3{% if not loop.last %} border-bottom{% endif %}">
                 <div class="col">{{ harm_score.harm_definition().name() }}</div>
                 <div class="col">
-                    <div class="d-flex">
+                    <div class="d-flex gap-2">
                         <div class="d-flex gap-2 w-50">
                             {{ harm_score.stars() | display_stars("sm") }}
                         </div>
-                        <div class=""><span class="align-middle">{{ stars_description[harm_score.stars() | round | int]["rank"] }}</span></div>
+                        <div>{{ stars_description[harm_score.stars() | round | int]["rank"] }}</div>
                     </div>
                 </div>
                 <div class="col">{{ stars_description[harm_score.stars() | round | int]["explanation"] }}</div>
             </div>
         {% endfor %}
         </div>
     </div>
-</div>
+</div>
diff --git a/src/coffee/templates/benchmark.html b/src/coffee/templates/benchmark.html
@@ -33,14 +33,14 @@ <h2 class="mb-3">AI Systems Evaluated</h2>
             <div class="row py-3 border-bottom rounded-top-4 dropdown-title-bar">
                 <div class="col">AI System</div>
                 <div class="col">Overall Safety Rating</div>
-                <div class="col">Explanation</div>
+                <div class="col">Explanation 111</div>
                 <div class="col"></div>
             </div>
             {% for benchmark_score in grouped_benchmark_scores[benchmark_definition] %}
-                <div class="row py-3{% if not loop.last %} border-bottom{% endif %}">
+                <div class="row py-3 align-items-center{% if not loop.last %} border-bottom{% endif %}">
                     <div class="col"><span class="align-middle">{{ benchmark_score.sut.name }}</span></div>
                     <div class="col">
-                        <div class="d-flex">
+                        <div class="d-flex gap-2 align-items-center">
                             <div class="d-flex gap-2 w-50">
                                 {{ benchmark_score.stars() | display_stars("sm") }}
                             </div>
@@ -77,4 +77,4 @@ <h4 class="mb-3 mt-5">
         </div>
 
     </div>
-{% endblock %}
+{% endblock %}
diff --git a/src/coffee/templates/static/style.css b/src/coffee/templates/static/style.css
@@ -29,10 +29,16 @@ button, .btn {
 }
 
 .star-span-sm {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 20px;
 }
 
 .star-span-lg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 40px;
 }