From 588bc019113187db5f2a06dd34fc1cc6f3c34318 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Tue, 5 Dec 2023 23:36:56 +0100
Subject: [PATCH] Fill <td> with <a> link using ::after pseudoelement

---
 app/assets/stylesheets/application.css | 21 ++++++++++-----------
 app/helpers/application_helper.rb      |  5 -----
 app/views/units/index.html.erb         |  2 +-
 app/views/users/index.html.erb         |  2 +-
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 148e380..5197b94 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -312,26 +312,25 @@ table.items td {
   border-top: solid 1px #dddddd;
   padding-block: 0.1em;
 }
-/* NOTE: for <a> to fill <td> completely, we use 2 copies of same <a>. 1st is
- * left transparent in <td> to resize <td> to link length. 2nd is positioned
- * absolutely over whole <td> cell. */
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+/* TODO: change selector from td.link to td:has(a) once :has() is available on
+ * FF */
 table.items td.link {
   padding: 0;
   position: relative;
-}
-table.items td.link a {
-  color: transparent;
-  font: inherit;
-  padding-inline-start: 1em;
   text-align: left;
 }
-table.items td.link a:last-child {
+table.items td.link a {
   color: inherit;
-  display: flex;
+  font: inherit;
+  padding-inline-start: 1em;
+}
+table.items td.link a::after {
+  content: '';
   inset: 0;
   position: absolute;
 }
-table.items td.link a.subunit {
+table.items td.link .subunit {
   padding-inline-start: 1.6em;
 }
 table.items td.actions {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index c8083d7..70c60a5 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -88,11 +88,6 @@ module ApplicationHelper
     image_element_to(:link, name, image, options, html_options)
   end
 
-  # Workaround to fill <td> with link completely, see CSS for details.
-  def table_link_to(...)
-    link_to(...) * 2
-  end
-
 
   private
 
diff --git a/app/views/units/index.html.erb b/app/views/units/index.html.erb
index efa9f5b..445f2e9 100644
--- a/app/views/units/index.html.erb
+++ b/app/views/units/index.html.erb
@@ -21,7 +21,7 @@
     <% Unit.each_with_level(@units) do |unit, level| %>
       <tr>
         <td class="link">
-          <%= table_link_to unit.symbol, edit_unit_path(unit), class: level > 0 ? 'subunit' : '' %>
+          <%= link_to unit.symbol, edit_unit_path(unit), class: level > 0 ? 'subunit' : '' %>
         </td>
         <td><%= unit.name %></td>
         <td class="number"><%= scientifize(unit.multiplier) unless unit.multiplier == 1 %></td>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 6455d7a..9c3605c 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -11,7 +11,7 @@
   <tbody>
     <% @users.each do |user| %>
       <tr>
-        <td class="link"><%= table_link_to user.email, user_path(user) %></td>
+        <td class="link"><%= link_to user.email, user_path(user) %></td>
         <td>
           <% if user == current_user %>
             <%= user.status %>