From f2088ea39f0211ff90a7c51102b1753cabc6dd09 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Mon, 18 Mar 2024 00:27:47 +0100
Subject: [PATCH] Align table form inputs with non-input text

Closes #20
---
 app/assets/stylesheets/application.css | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 55b2218..4ff46e3 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -96,7 +96,7 @@ input[type=submit] {
 }
 input:not([type=submit]):not([type=checkbox]),
 select {
-  padding: 0.2rem 0.4rem;
+  padding: 0.2em 0.4em;
 }
 .button,
 button,
@@ -327,11 +327,15 @@ table.items tbody tr:hover {
 }
 table.items th {
   padding-block: 0.75em;
+  text-align: center;
 }
 table.items th,
 table.items td {
   padding-inline: 1em 0;
 }
+table.items td:has(input) {
+  padding-inline-start: calc(0.6em - 0.9px);
+}
 table.items th:last-child {
   padding-inline-end: 0.4em;
 }
@@ -344,25 +348,24 @@ table.items td {
   padding-block: 0.1em;
 }
 /* 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;
+  padding: 0 0 0 1em;
   position: relative;
-  text-align: left;
 }
 table.items td.link a {
   color: inherit;
   font: inherit;
-  padding-inline-start: 1em;
 }
 table.items td.link a::after {
   content: '';
   inset: 0;
   position: absolute;
 }
-table.items td.link .subunit {
-  padding-inline-start: 1.6em;
+table.items td.subunit {
+  padding-inline-start: 1.8em;
+}
+table.items td.subunit:has(input) {
+  padding-inline-start: calc(1.4em - 1px);
 }
 table.items td.actions {
   display: flex;