Fix table row indentation for hierarchy

Closes #57

app/assets/stylesheets/application.css

@@ -29,6 +29,8 @@
   --color-dark-red: #b21237;
   --color-red: #ff1f5b;
 
+  --depth: 0;
+
   --z-index-flashes: 100;
   --z-index-table-row-outline: 10;
 }
@@ -363,24 +365,9 @@ table.items th,
 table.items td {
   padding-inline: 1em 0;
 }
-table.items td:has(input, textarea) {
-  padding-inline-start: calc(0.6em - 0.9px);
-}
-table.items th:last-child {
-  padding-inline-end: 0.4em;
-}
-table.items td:last-child {
-  padding-inline-end: 0.1em;
-}
-table.items td {
-  border-top: solid 1px var(--color-border-gray);
-  height: 2.4em;
-  padding-block: 0.1em;
-}
 /* For <a> to fill <td> completely, we use an ::after pseudoelement. */
 table.items td.link {
   padding: 0;
-  padding-inline-start: calc(1em + var(--depth) * 0.8em);
   position: relative;
 }
 table.items td.link a {
@@ -392,11 +379,25 @@ table.items td.link a::after {
   inset: 0;
   position: absolute;
 }
-table.items td.subunit {
+table.items td:first-child {
-  padding-inline-start: 1.8em;
+  padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-table.items td.subunit:has(input, textarea) {
+table.items td:has(input, textarea) {
-  padding-inline-start: calc(1.4em - 1px);
+  padding-inline-start: calc(0.6em - 0.9px);
+}
+table.items td:first-child:has(input, textarea) {
+  padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
+}
+table.items th:last-child {
+  padding-inline-end: 0.4em;
+}
+table.items td:last-child {
+  padding-inline-end: 0.1em;
+}
+table.items td {
+  border-top: solid 1px var(--color-border-gray);
+  height: 2.4em;
+  padding-block: 0.1em;
 }
 table.items td.actions {
   align-items: center;

app/views/default/units/_unit.html.erb

@@ -1,5 +1,6 @@
 <%= tag.tr do %>
-  <td class="<%= class_names({subunit: unit.base_id?, grayed: unit.default?}) %>">
+  <td class="<%= class_names({grayed: unit.default?}) %>"
+      style="--depth:<%= unit.base_id? ? 1 : 0 %>">
     <%= unit %>
   </td>
 

app/views/quantities/_form.html.erb

@@ -2,7 +2,7 @@
   <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
-    <td class="<%= class_names({subquantity: @quantity.parent}) %>">
+    <td style="--depth:<%= @quantity.depth %>">
       <%= form.text_field :name, required: true, autofocus: true, size: 20 %>
     </td>
     <td>

app/views/units/_form.html.erb

@@ -2,7 +2,7 @@
   <%- tag.tr id: row, class: "form", onkeydown: "processKey(event)",
     data: {link: link, form: form_tag, hidden_row: hidden_row} do %>
 
-    <td class="<%= class_names({subunit: @unit.base_id?}) %>">
+    <td style="--depth:<%= @unit.base_id? ? 1 : 0 %>">
       <%= form.text_field :symbol, required: true, autofocus: true, size: 12 %>
     </td>
     <td>

app/views/units/_unit.html.erb

@@ -6,7 +6,7 @@
                   drop_id: dom_id(unit.base || unit),
                   drop_id_param: "unit[base_id]"} do %>
 
-  <td class="<%= class_names('link', {subunit: unit.base}) %>">
+  <td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
     <%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
   </td>
   <td><%= unit.description %></td>