From fd8d9762f27795a456c9f0601dc47c1659f428f3 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Mon, 14 Mar 2022 18:32:28 +0200
Subject: [PATCH] fix: Use fixed lengths for the first three columns of "meta"
 tables (#3637)

Fixes #3615.
---
 ietf/static/css/ietf.scss                     | 19 +++++++++++++++++++
 ietf/templates/doc/document_bofreq.html       |  6 +++---
 ietf/templates/doc/document_charter.html      |  6 +++---
 .../doc/document_conflict_review.html         |  6 +++---
 ietf/templates/doc/document_material.html     |  4 ++--
 .../templates/doc/document_status_change.html |  6 +++---
 ietf/templates/group/group_about.html         |  6 +++---
 7 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index 625ea3f1f..b8e422929 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -87,6 +87,25 @@ pre {
     font-size: inherit;
 }
 
+// Use fixed lengths for the first three columns of "meta" tables.
+table tbody.meta {
+
+    th:first-child,
+    td:first-child {
+        width: 9em;
+    }
+
+    th:nth-child(2),
+    td:nth-child(2) {
+        // text-align: right;
+        width: 14em;
+    }
+
+    td.edit {
+        width: 1px; // Make sure it uses as little space as possible
+    }
+}
+
 // Highlight required form field labels with bi-asterisk
 .required>label:after {
     display: inline-block;
diff --git a/ietf/templates/doc/document_bofreq.html b/ietf/templates/doc/document_bofreq.html
index 4c5d93a8f..58cb88429 100644
--- a/ietf/templates/doc/document_bofreq.html
+++ b/ietf/templates/doc/document_bofreq.html
@@ -16,10 +16,10 @@
     <table class="table table-sm table-borderless">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-1">Document</th>
-                <th class="col-2">Type</th>
+                <th>Document</th>
+                <th>Type</th>
                 <td class="edit"></td>
-                <td class="col-9">
+                <td>
                     {{ doc.get_state.slug|capfirst }} BOF request
                     {% if snapshot %}<span class="badge bg-warning">Snapshot</span>{% endif %}
                 </td>
diff --git a/ietf/templates/doc/document_charter.html b/ietf/templates/doc/document_charter.html
index 355f7eee3..baf9b22b4 100644
--- a/ietf/templates/doc/document_charter.html
+++ b/ietf/templates/doc/document_charter.html
@@ -47,8 +47,8 @@
     <table class="table table-sm table-borderless">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-1">Document</th>
-                <th class="col-2">
+                <th>Document</th>
+                <th>
                     {% if doc.get_state_slug != "approved" %}
                         Proposed charter
                     {% else %}
@@ -56,7 +56,7 @@
                     {% endif %}
                 </th>
                 <td class="edit"></td>
-                <th class="col-9">
+                <th>
                     {{ group.name }} {{ group.type.name }}
                     <a href="{{ group.about_url }}">({{ group.acronym }})</a>
                     {% if snapshot %}<span class="badge bg-warning">Snapshot</span>{% endif %}
diff --git a/ietf/templates/doc/document_conflict_review.html b/ietf/templates/doc/document_conflict_review.html
index 43b7f2ba2..3e39a32d9 100644
--- a/ietf/templates/doc/document_conflict_review.html
+++ b/ietf/templates/doc/document_conflict_review.html
@@ -17,8 +17,8 @@
     <table class="table table-sm table-borderless mb-3">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-1">Document</th>
-                <th class="col-2">
+                <th>Document</th>
+                <th>
                     {% if doc.get_state_slug not in approved_states %}
                         Proposed conflict review
                     {% else %}
@@ -26,7 +26,7 @@
                     {% endif %}
                 </th>
                 <td class="edit"></td>
-                <td class="col-9">
+                <td>
                     <a href="{% url "ietf.doc.views_doc.document_main" name=conflictdoc.canonical_name %}">
                         {% if conflictdoc.get_state_slug == 'rfc' %}
                             {{ conflictdoc.canonical_name|upper }}
diff --git a/ietf/templates/doc/document_material.html b/ietf/templates/doc/document_material.html
index 11aae1339..695ed66fe 100644
--- a/ietf/templates/doc/document_material.html
+++ b/ietf/templates/doc/document_material.html
@@ -15,12 +15,12 @@
     <table class="table table-sm table-borderless">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-2">
+                <th>
                     {% if doc.meeting_related %}Meeting{% endif %}
                     {{ doc.type.name }}
                 </th>
                 <td></td>
-                <td class="col-10">
+                <td>
                     {% if doc.group %}
                         {{ doc.group.name }}
                         <a href="{{ doc.group.about_url }}">({{ doc.group.acronym }})</a>
diff --git a/ietf/templates/doc/document_status_change.html b/ietf/templates/doc/document_status_change.html
index f1fc55682..82ee75fa9 100644
--- a/ietf/templates/doc/document_status_change.html
+++ b/ietf/templates/doc/document_status_change.html
@@ -17,8 +17,8 @@
     <table class="table table-sm table-borderless">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-1">Document</th>
-                <th class="col-2">
+                <th>Document</th>
+                <th>
                     {% if doc.get_state_slug not in approved_states %}
                         Proposed status change
                     {% else %}
@@ -33,7 +33,7 @@
                         </a>
                     {% endif %}
                 </td>
-                <th class="col-9">
+                <th>
                     {{ doc.title }}
                     {% if snapshot %}<span class="badge bg-warning">Snapshot</span>{% endif %}
                 </th>
diff --git a/ietf/templates/group/group_about.html b/ietf/templates/group/group_about.html
index e35b22d5f..60b95f8cd 100644
--- a/ietf/templates/group/group_about.html
+++ b/ietf/templates/group/group_about.html
@@ -14,15 +14,15 @@
     <table class="my-3 table table-sm table-borderless">
         <tbody class="meta border-top">
             <tr>
-                <th class="col-2">{{ group.type.name }}</th>
-                <th class="col-3">Name</th>
+                <th>{{ group.type.name }}</th>
+                <th>Name</th>
                 <td class="edit">
                     {% if can_edit_group %}
                         <a class="btn btn-primary btn-sm"
                            href="{% url 'ietf.group.views.edit' acronym=group.acronym field='name' %}">Edit</a>
                     {% endif %}
                 </td>
-                <th class="col-7">{{ group.name }}</th>
+                <th>{{ group.name }}</th>
             </tr>
             <tr>
                 <td></td>