Improve table actions layout

In the past we were using some <div> tags surrounding table action
links in order to guarantee these links wouldn't be wider that their
cell's space and wouldn't expand over two lines.

However, while these links didn't expand over two lines, at certain
resolutions the width of their text exceeded the width of the links,
causing part of the text to be outside their borders.

This behavior was also inconsistent: some tables had these <div> tags,
and some tables didn't.

Since we've now introduced the table actions component, the code is more
consistent and we're getting rid of these <div> tags. So now we're again
facing the issue where links could expand over two lines.

Using a flex layout solves this issue and considerably improves the
layout at lower resolutions.

app/assets/stylesheets/admin.scss

@@ -236,16 +236,8 @@ $sidebar-active: #f4fcd0;
       table-layout: fixed;
     }
 
-    [type="submit"] ~ a,
-    a ~ a {
-      margin-left: 0;
-      margin-right: 0;
-      margin-top: $line-height / 2;
-
-      @include breakpoint(medium) {
-        margin-left: $line-height / 2;
-        margin-top: 0;
-      }
+    [type="submit"] ~ a {
+      margin-left: $line-height / 2;
     }
   }
 

app/assets/stylesheets/admin/table_actions.scss

@@ -0,0 +1,12 @@
+.admin .table-actions {
+  align-items: baseline;
+  display: flex;
+
+  > :not(:first-child) {
+    margin-left: $line-height / 2;
+  }
+
+  > p {
+    align-self: flex-start;
+  }
+}

app/assets/stylesheets/application.scss

@@ -27,3 +27,4 @@
 @import "jquery-ui/sortable";
 @import "leaflet";
 @import "sticky_overrides";
+@import "admin/*";

app/components/admin/table_actions_component.html.erb

@@ -1,9 +1,11 @@
-<%= content %>
+<div class="table-actions">
+  <%= content %>
 
-<% if actions.include?(:edit) %>
-  <%= link_to edit_text, edit_path, edit_options %>
-<% end %>
+  <% if actions.include?(:edit) %>
+    <%= link_to edit_text, edit_path, edit_options %>
+  <% end %>
 
-<% if actions.include?(:destroy) %>
-  <%= link_to destroy_text, destroy_path, destroy_options %>
-<% end %>
+  <% if actions.include?(:destroy) %>
+    <%= link_to destroy_text, destroy_path, destroy_options %>
+  <% end %>
+</div>

app/views/admin/administrators/search.html.erb

@@ -17,7 +17,7 @@
           <tr>
             <td><%= user.name %></td>
             <td><%= user.email %></td>
-            <td class="text-right">
+            <td>
               <% if user.administrator? && user.administrator.persisted? %>
                 <%= render Admin::TableActionsComponent.new(user.administrator, actions: [:destroy]) %>
               <% else %>

app/views/admin/dashboard/actions/_default_actions.html.erb

@@ -4,7 +4,7 @@
     <td><%= Dashboard::Action.human_attribute_name("action_type_resource") %></td>
     <td class="text-center"><%= t("admin.dashboard.actions.index.active") %></td>
     <td colspan="4">&nbsp;</td>
-    <td class="text-right">
+    <td>
       <%= render Admin::TableActionsComponent.new(
         actions: [:edit],
         edit_path: admin_settings_path(anchor: "tab-proposals"),

app/views/admin/dashboard/actions/index.html.erb

@@ -17,7 +17,7 @@
       <th class="text-center"><%= t("admin.dashboard.actions.index.day_offset") %></th>
       <th class="text-center"><%= t("admin.dashboard.actions.index.required_supports") %></th>
       <th class="text-center"><%= t("admin.dashboard.actions.index.order") %></th>
-      <th class="text-right small-3"><%= t("admin.actions.actions") %></th>
+      <th class="small-3"><%= t("admin.actions.actions") %></th>
     </tr>
   </thead>
 
@@ -31,7 +31,7 @@
         <td class="text-center"><%= number_with_delimiter(action.day_offset, delimiter: ".") %></td>
         <td class="text-center"><%= number_with_delimiter(action.required_supports, delimiter: ".") %></td>
         <td class="text-center"><%= action.order %></td>
-        <td class="text-right">
+        <td>
           <%= render Admin::TableActionsComponent.new(action) %>
         </td>
       </tr>

app/views/admin/dashboard/administrator_tasks/index.html.erb

@@ -10,7 +10,7 @@
       <tr>
         <th><%= t("admin.dashboard.administrator_tasks.index.source") %></th>
         <th><%= t("admin.dashboard.administrator_tasks.index.resource") %></th>
-        <th class="text-right"><%= t("admin.actions.actions") %></th>
+        <th><%= t("admin.actions.actions") %></th>
       </tr>
     </thead>
 
@@ -23,7 +23,7 @@
           <td>
             <%= task.source.action.title %>
           </td>
-          <td class="text-right">
+          <td>
             <% unless task.executed_at? %>
               <%= render Admin::TableActionsComponent.new(task,
                 actions: [:edit],

app/views/admin/poll/booths/_booth.html.erb

@@ -5,7 +5,7 @@
   <td>
     <%= booth.location %>
   </td>
-  <td class="text-right">
+  <td>
     <% if controller_name == "shifts" || controller_name == "booths" && action_name == "available" %>
       <%= render Admin::TableActionsComponent.new(actions: []) do |actions| %>
         <%= actions.link_to t("admin.booths.booth.shifts"),

app/views/admin/poll/booths/index.html.erb

@@ -18,7 +18,7 @@
     <thead>
       <th><%= t("admin.booths.index.name") %></th>
       <th><%= t("admin.booths.index.location") %></th>
-      <th class="text-right"><%= t("admin.actions.actions") %></th>
+      <th><%= t("admin.actions.actions") %></th>
     </thead>
     <tbody>
     <% @booths.each do |booth| %>

app/views/admin/poll/questions/answers/documents.html.erb

@@ -27,7 +27,7 @@
     <table>
       <tr>
         <th scope="col"><%= t("admin.questions.show.answers.document_title") %></th>
-        <th scope="col" class="text-right"><%= t("admin.questions.show.answers.document_actions") %></th>
+        <th scope="col"><%= t("admin.questions.show.answers.document_actions") %></th>
       </tr>
 
       <% @answer.documents.each do |document| %>
@@ -35,7 +35,7 @@
           <td>
             <%= link_to document.title, document.attachment.url %>
           </td>
-          <td class="text-right">
+          <td>
             <%= render Admin::TableActionsComponent.new(document,
               actions: [:destroy],
               destroy_path: document_path(document)

app/views/admin/poll/questions/answers/videos/index.html.erb

@@ -17,9 +17,7 @@
       <tr>
         <th><%= t("admin.answers.videos.index.video_title") %></th>
         <th><%= t("admin.answers.videos.index.video_url") %></th>
-        <th class="text-right">
-          <%= t("admin.actions.actions") %>
-        </th>
+        <th><%= t("admin.actions.actions") %></th>
       </tr>
     </thead>
 
@@ -28,7 +26,7 @@
         <tr id="<%= dom_id(video) %>" class="poll_question_answer_video">
           <td><%= video.title %></td>
           <td><%= link_to "#{video.url}", video.url %></td>
-          <td class="text-right">
+          <td>
             <%= render Admin::TableActionsComponent.new(video) %>
           </td>
         </tr>

app/views/admin/poll/shifts/_search_officers_results.html.erb

@@ -10,9 +10,7 @@
       <tr>
         <th><%= t("admin.poll_shifts.new.table_name") %></th>
         <th><%= t("admin.poll_shifts.new.table_email") %></th>
-        <th class="text-right">
-          <%= t("admin.poll_shifts.new.table_shift") %>
-        </th>
+        <th><%= t("admin.poll_shifts.new.table_shift") %></th>
       </tr>
     </thead>
     <tbody>
@@ -24,7 +22,7 @@
         <td>
           <%= user.email %>
         </td>
-        <td class="text-right">
+        <td>
           <%= render Admin::TableActionsComponent.new(
             actions: [:edit],
             edit_text: t("admin.poll_shifts.new.edit_shifts"),