From 5fcf2aa44ac18e1e5846cad2f149888433853f00 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Tue, 13 Sep 2022 15:07:21 +0100
Subject: [PATCH] ui: Hyphenate table headers, and optionally force-wrap them
 (#4441)

---
 ietf/static/css/ietf.scss                | 10 ++++++++++
 ietf/templates/doc/ad_list.html          |  2 +-
 ietf/templates/nomcom/private_index.html |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index e5d3eb884..86b71f154 100644
--- a/ietf/static/css/ietf.scss
+++ b/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;
diff --git a/ietf/templates/doc/ad_list.html b/ietf/templates/doc/ad_list.html
index ba9c24111..189754e8a 100644
--- a/ietf/templates/doc/ad_list.html
+++ b/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 %}
diff --git a/ietf/templates/nomcom/private_index.html b/ietf/templates/nomcom/private_index.html
index 195d027c0..9a81c03d1 100644
--- a/ietf/templates/nomcom/private_index.html
+++ b/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>