Fix some spacing issues in user table and the wrapper

2 files changed, 65 insertions, 14 deletions

diff --git a/app/views/users/_user.html.erb b/app/views/users/_user.html.erb
index ba82375d..c9b21f0a 100644
--- a/app/views/users/_user.html.erb
+++ b/app/views/users/_user.html.erb
@@ -8,38 +8,61 @@
       <span class="field_hint"><%= t(".no_roles") %></span>
     <% end %>
   </td>
-  <td><%= link_to t("admin.common.show"), user_path(user) %></td>
-  <td>
+  <td class="user_action">
+    <%= link_to user_path(user), "aria-label" => t("admin.common.show"),
+          title: t("admin.common.show") do %>
+      <%= icon("eye", library: "tabler", "aria-hidden": true) %>
+    <% end %>
+  </td>
+  <td class="user_action">
     <% if current_user.admin? || current_user == user %>
-      <%= link_to t("admin.common.edit"), edit_user_path(user) %>
+      <%= link_to edit_user_path(user), "aria-label" => t("admin.common.edit"),
+            title: t("admin.common.edit") do %>
+        <%= icon("edit", library: "tabler", "aria-hidden": true) %>
+      <% end %>
     <% end %>
   </td>
-  <td>
+  <td class="user_action">
     <% if current_user.admin? && current_user != user %>
       <% if user.alumni? %>
-        <%= button_to t(".reactivate"), reactivate_user_path(user), method: :put,
-              form: { class: 'button_to state_changing' } %>
+        <%= button_to reactivate_user_path(user), method: :put,
+              form: { class: 'button_to state_changing' },
+              "aria-label" => t(".reactivate"), title: t(".reactivate") do %>
+          <%= icon("user-check", library: "tabler", "aria-hidden": true) %>
+        <% end %>
       <% else %>
-        <%= button_to t(".deactivate"), deactivate_user_path(user), method: :put,
+        <%= button_to deactivate_user_path(user), method: :put,
               form: { data: { confirm: t(".confirm_deactivate", :login => user.login) },
-                      class: 'button_to destructive' } %>
+                      class: 'button_to destructive' },
+              "aria-label" => t(".deactivate"), title: t(".deactivate") do %>
+          <%= icon("user-off", library: "tabler", "aria-hidden": true) %>
+        <% end %>
       <% end %>
     <% end %>
   </td>
-  <td>
+  <td class="user_action">
     <% if current_user.redaktion? && !user.alumni? %>
       <% if user.redaktion? %>
         <% unless user == current_user %>
-          <%= button_to t(".revoke_redaktion"), revoke_redaktion_user_path(user), method: :put,
+          <%= button_to revoke_redaktion_user_path(user), method: :put,
                 form: { data: { confirm: t(".confirm_revoke_redaktion", :login => user.login) },
-                        class: 'button_to destructive' } %>
+                        class: 'button_to destructive' },
+                "aria-label" => t(".revoke_redaktion"), title: t(".revoke_redaktion") do %>
+            <%= icon("user-minus", library: "tabler", "aria-hidden": true) %>
+          <% end %>
         <% end %>
       <% elsif user.otp_enrolled? %>
-        <%= button_to t(".grant_redaktion"), grant_redaktion_user_path(user), method: :put,
+        <%= button_to grant_redaktion_user_path(user), method: :put,
               form: { data: { confirm: t(".confirm_grant_redaktion", :login => user.login) },
-                      class: 'button_to state_changing' } %>
+                      class: 'button_to state_changing' },
+              "aria-label" => t(".grant_redaktion"), title: t(".grant_redaktion") do %>
+          <%= icon("user-plus", library: "tabler", "aria-hidden": true) %>
+        <% end %>
       <% else %>
-        <span class="field_hint"><%= t(".needs_otp") %></span>
+        <span class="field_hint" title="<%= t(".needs_otp") %>"
+              aria-label="<%= t(".needs_otp") %>">
+          <%= icon("shield-off", library: "tabler", "aria-hidden": true) %>
+        </span>
       <% end %>
     <% end %>
   </td>
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index be8725d3..a54c47a3 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -137,6 +137,7 @@ input[type=radio] {
 
 #wrapper {
   margin: 0 5px;
+  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
 }
 
 @media(min-width:1016px) {
@@ -846,6 +847,33 @@ table.revisions_table tr:hover {
   color: var(--text-muted);
 }
 
+.user_table td.user_action {
+  width: 1px;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.user_table td.user_action a {
+  text-decoration: none;
+}
+
+.user_table td.user_action svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.user_table td.user_action .field_hint svg {
+  color: var(--text-muted);
+  vertical-align: middle;
+}
+
+/* Four groups stacked, and the last one needs clearance from the wrapper. */
+.user_table {
+  width: 100%;
+  max-width: 44rem;
+  margin-bottom: 1.5rem;
+}
+
 .role_choice {
   display: block;
   margin-bottom: 0.35rem;