From 610ef104f31cd2d745471d269f10f0eac0c03c02 Mon Sep 17 00:00:00 2001
From: Mike Lay <mike@mkly.io>
Date: Tue, 30 Jan 2024 12:46:32 -0800
Subject: [PATCH] Button alignment in row

---
 src/coffee/templates/_sut_card.html   | 10 +++++-----
 src/coffee/templates/benchmark.html   |  8 ++++----
 src/coffee/templates/static/style.css |  6 ++++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/coffee/templates/_sut_card.html b/src/coffee/templates/_sut_card.html
index e069a0c3..3d2468ed 100644
--- a/src/coffee/templates/_sut_card.html
+++ b/src/coffee/templates/_sut_card.html
@@ -16,20 +16,20 @@ <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>
@@ -37,4 +37,4 @@ <h2 class="mb-0">{{ stars_description[benchmark_score.stars() | round | int]["ra
         {% endfor %}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/coffee/templates/benchmark.html b/src/coffee/templates/benchmark.html
index e11181a5..35b38b41 100644
--- 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 %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/coffee/templates/static/style.css b/src/coffee/templates/static/style.css
index 738a3d00..c05c7b07 100644
--- 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;
 }