Set pills width

Set the same width to all pills.

3 files changed, 6 insertions, 2 deletions

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index 6871cf8..2dc0c3e 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -35,3 +35,7 @@ html, body {
   color: white !important;
   background-color: #99791a !important;
 }
+
+.og-pill {
+  width: 11em;
+}
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 00b451c..0f3a648 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -8,7 +8,7 @@ function showSelectedClient(client_checkbox) {
 
     if (client_checkbox.checked) {
         if (!($('#' + pill_id).length))
-            $(container).append('<div class="badge badge-pill badge-light" ' +
+            $(container).append('<div class="badge badge-pill og-pill badge-light" ' +
                                 'id="'+ pill_id + '">' + client_checkbox.name +
                                 '<br>' + client_checkbox.value + '</div>');
         return;
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 5cfeba7..19ec8c7 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -58,7 +58,7 @@
 <div class="d-flex flex-wrap justify-content-center">
     {% set max_clients = 50 %}
     {% for name_id, ip in selected_clients[:max_clients] %}
-    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill badge-light">
+    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill og-pill badge-light">
         {{ name_id }}<br>{{ ip }}
     </div>
     {% if loop.last and (selected_clients|length > max_clients) %}