Quick fix for election display

election/static/election/css/election.scss

@@ -25,12 +25,12 @@ $min_col_width: 100px;
   }
 }
 
-.election_vote {
-  overflow-x: scroll !important;
+#page #content {
+  overflow-x: clip;
 }
 
 .election_table {
-  width: 100%;
+  width: inherit;
 
   >.lists {
     display: flex;
@@ -93,16 +93,24 @@ $min_col_width: 100px;
         align-items: center;
         justify-content: space-between;
         margin: 0;
+        row-gap: 10px;
         padding: $padding;
         width: 100%;
 
 
         >.role_text {
+          display: flex;
+          flex-direction: column;
+
           >h4 {
             margin: 0;
           }
+
           >p {
+            flex-grow: 1;
             margin-top: .5em;
+            text-wrap: auto;
+            text-align: left;
           }
         }
 
@@ -215,7 +223,9 @@ $min_col_width: 100px;
                   margin: 0;
                   text-align: center;
                 }
+
                 .candidate_program {
+                  text-wrap: auto;
                   margin: 5px 0;
                 }
               }
@@ -253,6 +263,8 @@ $min_col_width: 100px;
   }
 }
 
+#content {
+
   .election_details {
     margin: .5em 0;
   }
@@ -285,8 +297,10 @@ $min_col_width: 100px;
 
     &_send {
       background-color: #59aee2;
+
       &:hover {
         background-color: rgb(130, 186, 235);
       }
     }
   }
+}

election/templates/election/election_detail.jinja

@@ -4,12 +4,11 @@
   {{ object.title }}
 {% endblock %}
 
-{% block head %}
-  {{ super() -}}
-  <link rel="stylesheet" href="{{ static('election/css/election.scss') }}">
-{%- endblock %}
-
 {% block additional_css %}
+  <link rel="stylesheet" href="{{ static('election/css/election.scss') }}">
+{% endblock %}
+
+{% block additional_js %}
   <script src="{{ static('bundled/vendored/jquery.shorten.min.js') }}"></script>
 {% endblock %}
 
@@ -47,7 +46,6 @@
       {% csrf_token %}
       <table class="election_table">
         {%- set election_lists = election.election_lists.all() -%}
-        <caption></caption>
         <thead class="lists">
           <tr>
             <th class="column" style="width: {{ 100 / (election_lists.count() + 1) }}%">{% trans %}Blank vote{% endtrans %}</th>
@@ -204,7 +202,7 @@
     $('.role_description').shorten({
       moreText: "{% trans %}Show more{% endtrans %}",
       lessText: "{% trans %}Show less{% endtrans %}",
-      showChars: 50
+      showChars: 300
     });
     $('.candidate_program').shorten({
       moreText: "{% trans %}Show more{% endtrans %}",