fix: Use fixed lengths for the first three columns of "meta" tables (ietf-tools#3637)

Fixes ietf-tools#3615.

Author: larseggert

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;

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>

ietf/templates/doc/document_charter.html

@@ -47,16 +47,16 @@
     <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 %}
                         Charter
                     {% 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 %}

ietf/templates/doc/document_conflict_review.html

@@ -17,16 +17,16 @@
     <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 %}
                         Conflict review
                     {% 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 }}

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>

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>

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>