ui: Hyphenate table headers, and optionally force-wrap them (#4441)

ietf/static/css/ietf.scss

@@ -168,6 +168,16 @@ table tbody.meta {
     }
 }
 
+// Try and hyphenate table headings
+th {
+    hyphens: auto;
+}
+
+// Helper to make sure very wide tables work on narrow screens.
+.wrap-anywhere {
+    overflow-wrap: anywhere;
+}
+
 // Highlight required form field labels with bi-asterisk
 .required>label:after {
     display: inline-block;

ietf/templates/doc/ad_list.html

@@ -18,7 +18,7 @@
     {% for group in workload %}
         <h2 class="mt-5" id="{{ group.group_type|slugify }}">{{ group.group_type }} State Counts</h2>
         <table class="table table-sm table-striped table-bordered tablesorter">
-            <thead>
+            <thead class="wrap-anywhere">
                 <tr>
                     <th scope="col" data-sort="name">Area Director</th>
                     {% for g, desc, up_is_good in group.group_names %}

ietf/templates/nomcom/private_index.html

@@ -9,7 +9,7 @@
     {% origin %}
     <h2 class="mt-3">Nomination status</h2>
     <table class="table table-sm table-striped table-hover tablesorter">
-        <thead>
+        <thead class="wrap-anywhere">
             <tr>
                 <th scope="col" data-sort="position">Position</th>
                 <th scope="col" data-sort="open">Open</th>