Fix tables for Most Active Minesweepers on Metrics Page

Previously, we weren't recovering gracefully when rendering un-named
Users in the Most Active players table. Instead, we were showing the
URL, which could take up quite a bit of room, which would then cause
the table to overflow the column it was in.

So we fix both issues.
- Substitute in the User's `MMS` identifier if they don't have a
  username.
- Don't allow the table to overflow its column/container. And truncate
  the username if it's extra long.

Also, get rid of the `border-separate` and `border-spacing-*`
classes/styles as they cause weirdness. The `-mx-6` wasn't doing what
it should have... it was only nullifying the left margin. So the result
was a table that didn't take up its full col width. Instead, we switch
to doing our own cell padding, manually. Kind of a drag, but tailwind
makes it easy enough with some of the more advanced child selectors.

Also:
- Change "Count" to just "#" so the 3rd column takes up as little
  space as possible.
- Only show a browser tooltip for Users that have a username (to also
  reveal their MMS ID--via the usual User#display_name format).

app/views/metrics/participants/most_actives.rb

@@ -51,8 +51,9 @@ def initialize(user)
       def table_cell_css = nil
 
       def display_name = user.display_name
-      def username = user.username
+      def name = user.username || user.mms_id
       def user_url = Router.user_path(user)
+      def show_title? = user.username?
       def active_participation_count = user.active_participation_count
 
       private
@@ -68,8 +69,9 @@ class NullListing
       def present? = false
       def table_cell_css = "text-dim-lg"
       def display_name = nil
-      def username = View.no_value_indicator
+      def name = View.no_value_indicator
       def user_url = nil
+      def show_title? = false
       def active_participation_count = View.no_value_indicator
     end
   end

app/views/metrics/show.html.erb

@@ -19,18 +19,16 @@
             data-controller="active-link"
             data-active-link-active-class="active"
             data-action="display-case:hide@window->active-link#clear"
-            class="max-w-5xl grid lg:grid-cols-3 gap-x-24 gap-y-6"
+            class="max-w-5xl grid lg:grid-cols-3 gap-x-12 gap-y-6"
           >
             <% engagements.bests_per_type.each do |bests| %>
-              <nav class="space-y-3">
+              <div class="space-y-3">
                 <h4 class="h3"><%= bests.type %></h4>
 
                 <table
                   class="
-                    -mx-6 -my-2
-                    table-fixed
-                    border-separate border-spacing-x-6 border-spacing-y-2
-                    text-left
+                    table-fixed text-left
+                    *:*:*:not-last:pr-6 [&_th]:pb-2 [&_tr]:not-last:*:pb-2
                   "
                 >
                   <thead>
@@ -63,7 +61,7 @@
                     <% end %>
                   </tbody>
                 </table>
-              </nav>
+              </div>
             <% end %>
           </div>
         <% end %>
@@ -79,40 +77,36 @@
         <h3 class="h2">Most Active</h3>
 
         <% cache(participants.cache_key) do %>
-          <div class="max-w-5xl grid lg:grid-cols-3 gap-x-24 gap-y-6">
+          <div class="max-w-5xl grid lg:grid-cols-3 gap-x-12 gap-y-6">
             <% participants.most_actives_per_type.each do |most_actives| %>
-              <nav class="space-y-3">
+              <div class="max-w-sm space-y-3">
                 <h4 class="h3"><%= most_actives.type %></h4>
 
                 <table
                   class="
-                    -mx-6 -my-2
-                    table-fixed
-                    border-separate border-spacing-x-6 border-spacing-y-2
-                    text-left
+                    table-fixed w-full text-left
+                    *:*:*:not-last:pr-6 [&_th]:pb-2 [&_tr]:not-last:*:pb-2
                   "
                 >
                   <thead>
                     <tr>
-                      <th>Rank</th>
-                      <th class="min-w-[100px]">Name</th>
-                      <th>
-                        <%= tt(
-                              "Count",
-                              scope: "metrics.minesweepers.most_active") %>
+                      <th class="w-16">Rank</th>
+                      <th class="w-full">Name</th>
+                      <th class="w-8">
+                        <%= tt("#", scope: "metrics.minesweepers.most_active") %>
                       </th>
                     </tr>
                   </thead>
                   <tbody>
                     <% most_actives.listings.each_with_index do |listing, index| %>
                       <tr>
                         <td><%= index.next %></td>
-                        <td class="<%= listing.table_cell_css %>">
+                        <td class="truncate <%= listing.table_cell_css %>">
                           <%= link_to_if(
                                 listing.present?,
-                                listing.username,
+                                listing.name,
                                 listing.user_url,
-                                title: listing.display_name) %>
+                                title: (listing.display_name if listing.show_title?)) %>
                         </td>
                         <td class="<%= listing.table_cell_css %>">
                           <%= listing.active_participation_count %>
@@ -121,7 +115,7 @@
                     <% end %>
                   </tbody>
                 </table>
-              </nav>
+              </div>
             <% end %>
           </div>
         <% end %>

config/locales/en.yml

@@ -118,7 +118,7 @@ en:
           ⛴️: Actively participating minesweepers count.
       minesweepers:
         most_active:
-          count: Engagements count.
+          "#": Engagements count.
 
   site:
     name: Minesweeper Alliance