style: separate icons into their own column and set percentage width for each column

Author: JensH0rnung

teamvault/apps/secrets/templates/secrets/secret_revisions.html

@@ -11,14 +11,15 @@ <h2 class="mb-3">
         </h2>
         <div class="card">
             <div class="card-body table-responsive">
-                <table class="table table-hover">
+                <table class="table table-hover table-layout-fixed">
                     <thead>
                         <tr>
-                            <th>{% trans "Date" %}</th>
-                            <th>{% trans "Changed by" %}</th>
-                            <th>{% trans "Name" %}</th>
-                            <th>{% trans "Details" %}</th>
-                            <th>{% trans "View" %}</th>
+                            <th id="date">{% trans "Date" %}</th>
+                            <th id="change-type" aria-label="Change type"></th>
+                            <th id="changed-by">{% trans "Changed by" %}</th>
+                            <th id="name">{% trans "Name" %}</th>
+                            <th id="details">{% trans "Details" %}</th>
+                            <th id="view">{% trans "View" %}</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -32,31 +33,36 @@ <h2 class="mb-3">
                             </span>
                           </td>
                           <td>
-                            {% if r.kind == "payload" %}
-                              <span>
+                            <div class="d-flex align-items-center">
+                              {% if r.kind == "payload" %}
+                                <span>
+                                  <i class="fa fa-key text-primary ms-1" data-bs-toggle="tooltip"
+                                   title="{% trans 'Secret value changed' %}"></i>
+                                </span>
+                                <span class="revision-icon-placeholder"></span>
+                              {% elif r.kind == "restore" %}
+                                <span>
+                                  <i class="fa fa-undo text-danger me-1" data-bs-toggle="tooltip"
+                                   title="{% trans 'Secret was restored to this version' %}"></i>
+                                </span>
+                                <span class="revision-icon-placeholder"></span>
+                              {% elif r.kind == "meta" %}
+                                <span>
+                                  <i class="fa fa-pencil text-muted ms-1" data-bs-toggle="tooltip"
+                                   title="{% trans 'Metadata changed' %}"></i>
+                                </span>
+                                <span class="revision-icon-placeholder"></span>
+                              {% elif r.kind == "payload_and_meta" %}
                                 <i class="fa fa-key text-primary ms-1" data-bs-toggle="tooltip"
                                  title="{% trans 'Secret value changed' %}"></i>
-                              </span>
-                              <span class="revision-icon-placeholder"></span>
-                            {% elif r.kind == "restore" %}
-                              <span>
-                                <i class="fa fa-undo text-danger me-1" data-bs-toggle="tooltip"
-                                 title="{% trans 'Secret was restored to this version' %}"></i>
-                              </span>
-                              <span class="revision-icon-placeholder"></span>
-                            {% elif r.kind == "meta" %}
-                              <span>
                                 <i class="fa fa-pencil text-muted ms-1" data-bs-toggle="tooltip"
                                  title="{% trans 'Metadata changed' %}"></i>
-                              </span>
-                              <span class="revision-icon-placeholder"></span>
-                            {% elif r.kind == "payload_and_meta" %}
-                              <i class="fa fa-key text-primary ms-1" data-bs-toggle="tooltip"
-                               title="{% trans 'Secret value changed' %}"></i>
-                              <i class="fa fa-pencil text-muted ms-1" data-bs-toggle="tooltip"
-                               title="{% trans 'Metadata changed' %}"></i>
-                            {% endif %}
-                            {{ r.user }}
+                              {% endif %}
+                            </div>
+                          </td>
+
+                          <td>
+                            <span class="d-block text-truncate" data-bs-toggle="tooltip" title="{{ r.user }}">{{ r.user }}</span>
                           </td>
 
                           <td>

teamvault/static/scss/secrets.scss

@@ -177,3 +177,26 @@ $max_progress: 30s;
   display: inline-block;
   width: 1.25em;
 }
+
+.table-layout-fixed {
+    table-layout: fixed;
+
+    #date {
+      width: 12%;
+    }
+    #change-type {
+      width: 4%;
+    }
+    #changed-by {
+      width: 15%;
+    }
+    #name {
+      width: 15%;
+    }
+    #details {
+      width: 44%;
+    }
+    #view {
+      width: 10%;
+    }
+}