Prepare the user list for stacked account flags

2 files changed, 24 insertions, 15 deletions

diff --git a/app/views/users/_user.html.erb b/app/views/users/_user.html.erb
index 26d6cab2..d944fff0 100644
--- a/app/views/users/_user.html.erb
+++ b/app/views/users/_user.html.erb
@@ -1,19 +1,21 @@
 <% users.each do |user| %>
 <tr>
   <td class="user_login">
-    <% if user.otp_enrolled? %>
-      <span role="img" title="<%= t(".otp_enrolled") %>" aria-label="<%= t(".otp_enrolled") %>">
-        <%= icon("shield-check", library: "tabler", "aria-hidden": true) %>
-      </span>
-    <% elsif user.otp_pending_secret.present? %>
-      <span role="img" class="otp_missing" title="<%= t(".otp_pending") %>" aria-label="<%= t(".otp_pending") %>">
-        <%= icon("shield-half", library: "tabler", "aria-hidden": true) %>
-      </span>
-    <% else %>
-      <span role="img" class="otp_missing" title="<%= t(".otp_missing") %>" aria-label="<%= t(".otp_missing") %>">
-        <%= icon("shield-off", library: "tabler", "aria-hidden": true) %>
-      </span>
-    <% end %>
+    <span class="user_flag_stack">
+      <% if user.otp_enrolled? %>
+        <span role="img" title="<%= t(".otp_enrolled") %>" aria-label="<%= t(".otp_enrolled") %>">
+          <%= icon("shield-check", library: "tabler", "aria-hidden": true) %>
+        </span>
+      <% elsif user.otp_pending_secret.present? %>
+        <span role="img" class="otp_missing" title="<%= t(".otp_pending") %>" aria-label="<%= t(".otp_pending") %>">
+          <%= icon("shield-half", library: "tabler", "aria-hidden": true) %>
+        </span>
+      <% else %>
+        <span role="img" class="otp_missing" title="<%= t(".otp_missing") %>" aria-label="<%= t(".otp_missing") %>">
+          <%= icon("shield-off", library: "tabler", "aria-hidden": true) %>
+        </span>
+      <% end %>
+    </span>
     <%= user.login %>
   </td>
   <td class="user_roles">
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index ba6a27f8..82d1d381 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -911,10 +911,17 @@ table.revisions_table tr:hover {
   display: block;
 }
 
-.user_table .user_login svg {
-  color: var(--text-muted);
+.user_table .user_login .user_flag_stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
   vertical-align: -0.15em;
   margin-right: 0.5rem;
+}
+
+.user_table .user_login svg {
+  color: var(--text-muted);
   width: 1rem;
   height: 1rem;
 }