Fix SQLite compatibility in Unit and Quantity models

Several fixes to make complex Arel/CTE queries work with both MySQL and SQLite: Unit model: - Add guard for description length validation (text column .limit returns nil in SQLite) - defaults_diff: rename 'units' CTE to 'all_units' to avoid SQLite circular reference (SQLite treats any CTE in WITH RECURSIVE that references a same-named table as circular) - defaults_diff: read from 'all_units' CTE explicitly in UNION parts via AR::Relation instead of relying on CTE name shadowing; use AR::Relation (not SelectManager) for UNION parts to avoid extra parentheses (visit_Arel_SelectManager always wraps in parens) - defaults_diff: qualify GROUP BY and ORDER BY columns to avoid ambiguity when bases_units join adds a second table with same column names - Qualify :symbol in ordering to avoid ambiguous column in joined queries Quantity model: - Add guard for description length validation (text column .limit returns nil in SQLite) - ordered: rename recursive CTE from 'quantities' to 'q_ordered' to avoid circular reference; use AR::Relation for UNION parts; fix column qualifiers; use printf() instead of LPAD() for SQLite (LPAD not supported), BLOB instead of BINARY cast - common_ancestors: rename CTE to 'q_common', use AR::Relation for UNION parts - with_ancestors: rename CTE to 'q_ancestors', use AR::Relation for UNION parts - successive: replace SQL LAG window function approach (which causes nested WITH RECURSIVE) with Ruby array approach for SQLite compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-12 14:35:19 +00:00
27 changed files with 475 additions and 631 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1,34 +0,0 @@
-DESIGN
-======
-
-Below is a list of design decisions. The justification is to be consulted
-whenever a change is considered, to avoid regressions.
-
-### Data type for DB storage of numeric values (`decimal` vs `float`)
-
-* among database engines supported (by Rails), SQLite offers storage of
-  `decimal` data type with the lowest precision, equal to the precision of
-  `REAL` type (double precision float value, IEEE 754), but in a floating point
-  format,
-    * decimal types in other database engines offer greater precision, but store
-      data in a fixed point format,
-* biology-related values differ by several orders of magnitude; storing them in
-  fixed point format would only make sense if required precision would be
-  greater than that offered by floating point format,
-    * even then, fixed point would mean either bigger memory requirements or
-      worse precision for numbers close to scale limit,
-        * for a fixed point format to use the same 8 bytes of storage as IEEE
-          754, precision would need to be limited to 18 digits (4 bytes/9 digits)
-          and scale approximately half of that - 9,
-    * double precision floating point guarantees 15 digits of precision, which
-      is more than enough for all expected use cases,
-        * single precision floating point only guarntees 6 digits of precision,
-          which is estimated to be too low for some use cases (e.g. storing
-          latitude/longitude with a resolution grater than 100m)
-* double precision floating point (IEEE 754) is a standard that ensures
-  compatibility with all database engines,
-    * the same data format is used internally by Ruby as a `Float`; it
-      guarantees no conversions between storage and computation,
-    * as a standard with hardware implementations ensures both: computing
-      efficiency and hardware/3rd party library compatibility as opposed to Ruby
-      custom `BigDecimal` type
--- a/app/assets/images/pictograms/alert-outline.svg
+++ b/app/assets/images/pictograms/alert-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
--- a/app/assets/images/pictograms/check-circle-outline.svg
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -18,12 +18,10 @@
 /* Strive for simplicity:
 * * style elements/tags only - if possible,
 * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. <form>, <table>, <a> as link/button),
- * * styles with multiple selectors should have all selectors with same
- * specificity, to allow proper rule specificity vs order management.
+ * differently depending on context (e.g. form)
 *
- * NOTE: style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available. */
+ * NOTE: Style in a modular way, similar to how CSS @scope would be used,
+ * to make transition easier once @scope is widely available */
 :root {
  --color-focus-gray: #f3f3f3;
  --color-border-gray: #dddddd;
@@ -55,36 +53,17 @@
 :focus-visible {
  outline: none;
 }
-/* NOTE: move to higher priority layer instead of using !important?; add CSS
- * @layer requirements in README */
-[disabled] {
-  border-color: var(--color-border-gray) !important;
-  color: var(--color-border-gray) !important;
-  /* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
-   * `cursor` on wrapping element.
-  cursor: not-allowed; */
-  fill: var(--color-border-gray) !important;
-  pointer-events: none !important;
-}
-/* Styles set `display` without distinguishing between [hidden] elements, making
- * them visible. */
-[hidden] {
-  display: none !important;
-}


 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer,
- *  gray - target for interaction with keyboard,
- *  red - destructive, non-undoable action.
+ *  blue - target for interaction with pointer
+ *  gray - target for interaction with keyboard
+ *  red - destructive, non-undoable action
 */
-/* TODO: merge selectors using :is() */
-a,
 button,
 details,
 input,
 select,
-summary,
 textarea {
  background-color: inherit;
  font: inherit;
@@ -94,24 +73,56 @@ input,
 select {
  text-align: inherit;
 }
+a,
+button,
+input[type=submit] {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+/* [hidden] submit controls cannot have `display` set as it makes them visible */
+.button,
+button:not([hidden]),
+input[type=submit]:not([hidden]),
+.tab {
+  align-items: center;
+  color: var(--color-gray);
+  display: flex;
+  fill: var(--color-gray);
+  font-weight: bold;
+}
+.button,
+button,
+input[type=submit] {
+  font-size: 0.8rem;
+  padding: 0.6em 0.5em;
+  width: fit-content;
+}
+input:not([type=submit]):not([type=checkbox]),
+select,
+summary,
+textarea {
+  padding: 0.2em 0.4em;
+}
+.button,
+button,
 input,
 select,
 summary,
 textarea {
-  border: 1px solid var(--color-gray);
+  border: solid 1px var(--color-gray);
  border-radius: 0.25em;
-  padding: 0.2em 0.4em;
 }
-svg {
-  height: 1.4em;
-  margin: 0 0.2em 0 0;
-  width: 1.4em;
-}
-svg:last-child {
-  margin-right: 0;
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
 }
+input[type=checkbox],
+svg,
 textarea {
-  margin: 0;
+  margin: 0
 }
 input[type=checkbox] {
  accent-color: var(--color-blue);
@@ -119,20 +130,17 @@ input[type=checkbox] {
  -webkit-appearance: none;
  display: flex;
  height: 1.1em;
-  margin: 0;
-  padding: 0;
  width: 1.1em;
 }
 input[type=checkbox]:checked {
  appearance: checkbox;
  -webkit-appearance: checkbox;
 }
-/* Hide spin buttons of <input type=number>. */
-/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
+/* Hide spin buttons in input number fields */
+/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
 input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
-  text-align: end;
 }
 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
@@ -141,108 +149,37 @@ input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
-/* Text color of table form controls:
- *  - black for row/table forms,
- *  - inherited for internal (column specific) buttons/forms. */
-table input,
-table select,
-table summary,
-table textarea {
-  border-color: var(--color-border-gray);
+.button > svg,
+.tab > svg,
+button > svg {
+  height: 1.4em;
+  width: 1.4em;
 }
-table input,
-table select,
-table textarea {
-  padding-block: 0.375em;
+.button > svg:not(:last-child),
+.tab > svg:not(:last-child),
+button > svg:not(:last-child) {
+  margin-right: 0.2em;
 }
-table form input,
-table form select,
-table form summary,
-table form textarea {
-  color: inherit;
-}
-table svg:not(:only-child) {
-  height: 1.25em;
-  width: 1.25em;
+/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+ * page-wide, top-level) and remove from table.items - as the style should be
+ * same everywhere */
+.button:focus-visible,
+button:focus-visible,
+input[type=submit]:focus-visible {
+  background-color: var(--color-focus-gray);
 }
 input:focus-visible,
 select:focus-visible,
 select:focus-within,
-/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
+/* TODO: how to achieve summary:focus-within for ::details-content? */
 summary:focus-visible,
 textarea:focus-visible {
  accent-color: var(--color-dark-blue);
  background-color: var(--color-focus-gray);
-  color: black;
 }
-input:hover,
-select:hover,
-summary:hover,
-textarea:hover {
-  border-color: var(--color-blue);
-  outline: 1px solid var(--color-blue);
-}
-select:hover,
-summary:hover {
-  color: black;
-  cursor: pointer;
-}
-/* TODO: style <details>/<summary> focus to match <select> as much as possible.
-summary:focus-visible::before,
-summary:hover::before {
-  background-color: black;
-}
- */
-input:invalid,
-select:invalid,
-textarea:invalid {
-  border-color: var(--color-red);
-  outline-color: var(--color-red);
-}
-
-/* `.button`: button-styled <a>, <button>, <input type=submit>.
- * `.link`: any other <a>.
- * `.tab`: tab-styled <a>.
- */
-.button,
-.link,
-.tab {
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.button,
-.tab {
-  align-items: center;
-  color: var(--color-gray);
-  display: flex;
-  fill: var(--color-gray);
-  font-weight: bold;
-}
-.button {
-  border: 1px solid var(--color-gray);
-  border-radius: 0.25em;
-  font-size: 0.8rem;
-  padding: 0.6em 0.5em;
-  width: fit-content;
-}
-.link {
-  color: inherit;
-  text-decoration: underline 1px var(--color-border-gray);
-  text-underline-offset: 0.25em;
-}
-[name=cancel],
-.auxiliary {
-  border-color: var(--color-border-gray);
-  color: var(--color-nav-gray);
-  fill: var(--color-nav-gray);
-}
-.button:focus-visible,
-.tab:focus-visible,
-.tab:hover {
-  background-color: var(--color-focus-gray);
-}
-.button:hover {
+.button:hover,
+button:hover,
+input[type=submit]:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: white;
@@ -252,24 +189,32 @@ textarea:invalid {
  background-color: var(--color-red);
  border-color: var(--color-red);
 }
-.link:focus-visible {
-  text-decoration-color: var(--color-gray);
+input:hover,
+select:hover,
+summary:hover,
+textarea:hover {
+  border-color: var(--color-blue);
+  outline: solid 1px var(--color-blue);
 }
-.link:hover {
-  color: var(--color-blue);
-  text-decoration-color: var(--color-blue);
+select:hover,
+summary:hover {
+  cursor: pointer;
 }
-table .button {
-  border-color: var(--color-border-gray);
-  color: var(--color-table-gray);
-  font-weight: normal;
-  height: 100%;
-  padding: 0.4em;
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-color: var(--color-red);
+  outline: solid 1px var(--color-red);
+}
+input[type=text]:read-only,
+textarea:read-only {
+  border: none;
+  padding-inline: 0;
 }


-/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * `grid-collapse` property and remove alternative `grid-template-areas`.
+/* NOTE: collapse gaps around empty rows (`topside`) once possible
+ * with grid-collapse property and remove alternative grid-template
 * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
  display: grid;
@@ -277,16 +222,16 @@ body {
  grid-template-areas:
    "header    header  header"
    "nav       nav     nav"
+    "leftside  topside rightside"
    "leftside  main    rightside";
  grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
  font-family: system-ui;
  margin: 0.4em;
 }
-body:has(> .topside-area) {
+body:not(:has(.topside-area)) {
  grid-template-areas:
    "header    header  header"
    "nav       nav     nav"
-    "leftside  topside rightside"
    "leftside  main    rightside";
 }

@@ -302,14 +247,18 @@ header {
  margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: 2px solid var(--color-nav-gray);
+  border-bottom: solid 2px var(--color-nav-gray);
  flex: 1;
  font-size: 1rem;
  justify-content: center;
  padding-block: 0.4em;
 }
+.navigation > .tab:hover,
+.navigation > .tab:focus-visible {
+  background-color: var(--color-focus-gray);
+}
 .navigation > .tab.active {
-  border-bottom: 4px solid var(--color-blue);
+  border-bottom: solid 4px var(--color-blue);
  color: var(--color-blue);
  fill: var(--color-blue);
 }
@@ -341,7 +290,7 @@ header {

 #flashes {
  display: grid;
-  row-gap: 0.4em;
+  gap: 0.2em;
  grid-template-columns: 1fr auto auto auto 1fr;
  left: 0;
  pointer-events: none;
@@ -357,17 +306,13 @@ header {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
-  line-height: 2.2em;
  pointer-events: auto;
 }
-.flash:before {
-  filter: invert();
-  height: 1.4em;
-  margin: 0 0.5em;
-  width: 1.4em;
-}
 .flash.alert:before {
  content: url('pictograms/alert-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.alert {
  border-color: var(--color-red);
@@ -375,24 +320,35 @@ header {
 }
 .flash.notice:before {
  content: url('pictograms/check-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.notice {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
 }
-.flash svg {
-  cursor: pointer;
-  fill: white;
-  height: 2.2em;
-  opacity: 0.6;
-  padding: 0.4em 0.5em;
-  width: 2.4em;
+.flash > div {
+  grid-column: 2;
 }
-.flash svg:hover {
+/* NOTE: currently flash button inherits some unnecessary styles from generic
+ * button. */
+.flash > button {
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.4em;
+  font-weight: bold;
+  grid-column: 3;
+  opacity: 0.6;
+  padding: 0.2em 0.4em;
+}
+.flash > button:hover {
  opacity: 1;
 }


+/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
  align-items: center;
  display: grid;
@@ -409,7 +365,7 @@ header {
 .labeled-form label.required {
  font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by `input:invalid`. */
+/* Don't style `label.error + input` if case already covered by input:invalid */
 .labeled-form label.error {
  color: var(--color-red);
 }
@@ -429,117 +385,200 @@ header {
 .labeled-form .auxiliary {
  grid-column: 3;
  /* If more buttons are needed, `grid-row` can be replaced with
-   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
+   * `reading-flow: grid-columns` to ensure proper tabindex order */
  grid-row: 1;
  height: 100%;
  padding-block: 0;
 }

-.tabular-form table {
-  border: none;
-  border-spacing: 0.4em 0;
-  margin-inline: -0.4em;
-}
-.tabular-form table td {
-  border: none;
-  vertical-align: middle;
-}
-.tabular-form table td {
-  padding-inline: 0;
-}
-.tabular-form table :is(form, input, select, textarea):only-child {
-  margin-inline-start: 0;
-}

-
-.items-table {
+/* TODO: remove .items class (?) and make 'form table' work properly */
+table.items {
  border-spacing: 0;
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
  border-radius: 0.25em;
  font-size: 0.85rem;
  text-align: left;
 }
-.items-table thead {
+table:not(:has(tr)) {
+  display: none;
+}
+table.items thead {
  font-size: 0.8rem;
 }
-.items-table thead,
-.items-table tbody tr:hover {
+table.items thead,
+table.items tbody tr:hover {
  background-color: var(--color-focus-gray);
 }
-.items-table th {
-  padding: 0.75em 0 0.75em 1em;
+table.items th {
+  padding-block: 0.75em;
  text-align: center;
 }
-.items-table th:last-child {
-  padding-inline-end: 0.4em;
+table.items th,
+table.items td {
+  padding-inline: 1em 0;
 }
-.items-table td {
-  border-top: 1px solid var(--color-border-gray);
-  height: 2.4em;
-  padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
-}
-.items-table td:last-child {
-  padding-inline-end: 0.1em;
-}
-.items-table :is(form, input, select, textarea):only-child {
-  margin-inline-start: calc(-0.4em - 0.9px);
-}
-/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
-/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
-.items-table td:has(> .link) {
+/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+table.items td.link {
+  padding: 0;
  position: relative;
 }
-.items-table .link::after {
+table.items td.link a {
+  color: inherit;
+  font: inherit;
+}
+table.items td.link a::after {
  content: '';
-  inset: -1px 0 0 0;
+  inset: 0;
  position: absolute;
 }
-.items-table .flex {
+table.items td:first-child {
+  padding-inline-start: calc(1em + var(--depth) * 0.8em);
+}
+table.items td:has(input, select, textarea) {
+  padding-inline-start: calc(0.6em - 0.9px);
+}
+table.items td:first-child:has(input, select, 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 .actions {
+  display: flex;
  gap: 0.4em;
  justify-content: end;
 }
-.items-table .dropzone {
+table.items .actions.centered {
+  justify-content: center;
+}
+table.items tr.dropzone {
  position: relative;
 }
-.items-table .dropzone::after {
+table.items tr.dropzone::after {
  content: '';
  inset: 1px 0 0 0;
  position: absolute;
-  outline: 2px dashed var(--color-blue);
+  outline: dashed 2px var(--color-blue);
  outline-offset: -1px;
  z-index: var(--z-index-table-row-outline);
 }
-.items-table .handle {
-  cursor: grab;
+table.items td.handle {
+  cursor: move;
 }
-.items-table .form td {
+table.items tr.form td {
  vertical-align: top;
 }
-.items-table td:not(:first-child),
+
+/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
+/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
+table.items td.link a:hover,
+table.items td.link a:focus-visible,
+table.items td.link a:hover:focus-visible {
+  text-decoration: underline;
+  text-decoration-thickness: 0.05rem;
+  text-underline-offset: 0.2rem;
+}
+table.items td.link a:hover {
+  color: var(--color-blue);
+}
+table.items td.link a:focus-visible {
+  text-decoration-color: var(--color-gray);
+}
+table.items td.link a:hover:focus-visible {
+  color: var(--color-dark-blue);
+}
+
+table.items td:not(:first-child),
 .grayed {
  color: var(--color-table-gray);
-  fill: var(--color-gray);
+  fill: var(--color-table-gray);
 }
-.items-table td:has(> svg:only-child) {
+table.items svg {
+  height: 1rem;
+  vertical-align: middle;
+  width: 1rem;
+}
+table.items svg:last-child {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+table.items td.svg {
  text-align: center;
 }
+table.items td.number {
+  text-align: right;
+}
+table.items .button,
+table.items button,
+table.items input[type=submit] {
+  font-weight: normal;
+  height: 100%;
+  padding: 0.4em;
+}
+table.items input:not([type=submit]):not([type=checkbox]),
+table.items select,
+table.items textarea {
+  padding-block: 0.375em;
+}
+/* TODO: find a way (layers?) to style inputs differently while making sure
+ * hover works properly without using :not(:hover) selectors here. */
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input:not(:hover),
+table.items select:not(:hover),
+table.items textarea:not(:hover) {
+  border-color: var(--color-border-gray);
+}
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input[type=submit]:not(:hover),
+table.items select:not(:hover) {
+  color: var(--color-table-gray);
+}
+table.items select:focus-within,
+table.items select:focus-visible {
+  color: black;
+}
+form table.items {
+  border: none;
+}
+form table.items td {
+  border: none;
+  text-align: left;
+  vertical-align: middle;
+}
+form table.items td:first-child {
+  color: inherit;
+}


-.center {
+.centered {
  margin: 0 auto;
 }
+.extendedright {
+  margin-right: auto;
+}
 .hexpand {
  width: 100%;
 }
-.flex {
+.hflex {
  display: flex;
  gap: 0.8em;
 }
-.flex.reverse {
+.hflex.reverse {
  flex-direction: row-reverse;
 }
-.flex.vertical {
-  flex-direction: column;
+.hflex.centered {
+  justify-content: center;
 }
 .hint {
  color: var(--color-table-gray);
@@ -547,18 +586,21 @@ header {
  font-size: 0.9rem;
  text-align: center;
 }
-.hmin50 {
-  min-width: 50%;
+.vflex {
+  display: flex;
+  gap: 0.8em;
+  flex-direction: column;
 }
-.italic {
-  color: var(--color-gray);
-  font-style: italic;
-}
-.ralign {
-  text-align: right;
-}
-.rextend {
-  margin-right: auto;
+[disabled] {
+/* label:has(input[disabled]) {
+ * TODO: disabled checkbox blue square focus removal; disabled label styling;
+ * focused label styling (currently only checkbox has focus)
+ * */
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  cursor: not-allowed;
+  fill: var(--color-border-gray) !important;
+  pointer-events: none;
 }


@@ -570,12 +612,12 @@ summary {
  align-items: center;
  color: var(--color-gray);
  display: flex;
-  gap: 0.4em;
+  gap: 0.2em;
  height: 100%;
  white-space: nowrap;
 }
 summary::before {
-  background-color: currentColor;
+  background-color: #000;
  content: "";
  height: 1em;
  mask-image: url('pictograms/chevron-down.svg');
@@ -587,7 +629,7 @@ summary:has(.button) {
  padding-inline-end: 0;
 }
 summary .button {
-  border: 1px solid var(--color-border-gray);
+  border: solid 1px var(--color-border-gray);
  border-radius: inherit;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
@@ -598,15 +640,15 @@ summary span {
  width: 100%;
 }
 details[open] summary::before {
-  transform: scaleY(-1);
+  transform: rotate(180deg);
 }
 summary::marker {
  padding-left: 0.25em;
 }
-/* NOTE: use `details[open]::details-content` once widely available. */
+/* NOTE: use details[open]::details-content once widely available */
 details[open] ul {
-  background-color: white;
-  border: 1px solid var(--color-border-gray);
+  background: white;
+  border: solid 1px var(--color-border-gray);
  border-radius: 0.25em;
  box-shadow: 1px 1px 3px var(--color-border-gray);
  margin: -1px 0 0 0;
@@ -628,15 +670,3 @@ li input[type=checkbox] {
 li::marker {
  content: '';
 }
-/*
- * TODO:
- * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
- * * disabled label styling,
- * * focused label styling (currently only checkbox has focus),
- * * disabled checkbox blue square focus removal.
- * */
-
-#measurement_form {
-  min-width: 66%;
-  width: max-content;
-}
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -12,12 +12,6 @@ module ApplicationHelper
      labeled_field_for(method, options) { super }
    end

-    def submit(value = nil, options = {})
-      value, options = nil, value if value.is_a?(Hash)
-      options[:class] = @template.class_names('button', options[:class])
-      super
-    end
-
    private

    def labeled_field_for(method, options)
@@ -102,28 +96,20 @@ module ApplicationHelper

    def number_field(method, options = {})
      attr_type = object.type_for_attribute(method)
-      case attr_type.type
-      when :decimal
+      if attr_type.type == :decimal
        options[:value] = object.public_send(method)&.to_scientific
        options[:step] ||= BigDecimal(10).power(-attr_type.scale)
        options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
          options[:step]
        options[:min] = options[:min] == :step ? options[:step] : options[:min]
        options[:min] ||= -options[:max]
-        options[:size] ||= attr_type.precision / 2
-      when :float
-        options[:size] ||= 6
      end
      super
    end

    def button(value = nil, options = {}, &block)
-      # #button does not use #objectify_options/@default_options
-      value, options = nil, value if value.is_a?(Hash)
-      options = options.merge(
-        @default_options.slice(:form),
-        class: @template.class_names('button', options[:class])
-      )
+      # button does not use #objectify_options
+      options.merge!(@options.slice(:form))
      super
    end

@@ -152,14 +138,12 @@ module ApplicationHelper
  end

  def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
-                     html: {autocomplete: 'off'}}
+    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
    form_with(**merge_attributes(options, extra_options), &block)
  end

  def svg_tag(source, label = nil, options = {})
-    label, options = nil, label if label.is_a? Hash
-    svg_tag = tag.svg(**options) do
+    svg_tag = tag.svg(options) do
      tag.use(href: "#{image_path(source + ".svg")}#icon")
    end
    label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -228,8 +212,9 @@ module ApplicationHelper
      # Conversion of flash to Array only required because of Devise
      Array(messages).map do |message|
        tag.div class: "flash #{entry}" do
-          tag.span(sanitize(message)) +
-            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
+          # TODO: change button text to svg to make it aligned vertically
+          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
        end
      end
    end.join.html_safe
--- a/app/helpers/quantities_helper.rb
+++ b/app/helpers/quantities_helper.rb
@@ -1,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes(quantities)
+  def quantities_check_boxes
    # Closing <details> on focusout event depends on relatedTarget for internal
    # actions being non-null. To ensure this, all top-layer elements of
    # ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
-    collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
+    collection_check_boxes(nil, :quantity, @quantities, :id, :to_s_with_depth,
                           include_hidden: false) do |b|
      content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
    end
--- a/app/models/quantity.rb
+++ b/app/models/quantity.rb
@@ -16,7 +16,7 @@ class Quantity < ApplicationRecord
  end
  validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
    length: {maximum: type_for_attribute(:name).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit} if type_for_attribute(:description).limit

  # Update :depths of progenies after parent change
  before_save if: :parent_changed? do
@@ -61,18 +61,22 @@ class Quantity < ApplicationRecord

  # Return: ordered [sub]hierarchy
  scope :ordered, ->(root: nil, include_root: true) {
-    numbered = Arel::Table.new('numbered')
+    q_ordered = Arel::Table.new('q_ordered')
+    cast_type = connection.adapter_name == 'Mysql2' ? 'BINARY' : 'BLOB'

-    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
-      numbered.project(
-        numbered[Arel.star],
-        numbered.cast(numbered[:child_number], 'BINARY').as('path')
-      ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
-      numbered.project(
-        numbered[Arel.star],
-        arel_table[:path].concat(numbered[:child_number])
-      ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
-    ]).order(arel_table[:path])
+    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(q_ordered: [
+      Quantity.from(Arel::Table.new('numbered').as(arel_table.name))
+        .select(
+          arel_table[Arel.star],
+          arel_table.cast(arel_table[:child_number], cast_type).as('path')
+        ).where(arel_table[root && include_root ? :id : :parent_id].eq(root)),
+      Quantity.from(Arel::Table.new('numbered').as(arel_table.name))
+        .joins("INNER JOIN q_ordered ON quantities.parent_id = q_ordered.id")
+        .select(
+          arel_table[Arel.star],
+          q_ordered[:path].concat(arel_table[:child_number])
+        )
+    ]).from(q_ordered.as(arel_table.name)).order(arel_table[:path])
  }

  # TODO: extract named functions to custom Arel extension
@@ -80,20 +84,24 @@ class Quantity < ApplicationRecord
  # be merged with :ordered
  # https://gist.github.com/ProGM/c6df08da14708dcc28b5ca325df37ceb#extending-arel
  scope :numbered, ->(parent_column, order_column) {
-    select(
-      arel_table[Arel.star],
-      Arel::Nodes::NamedFunction.new(
-        'LPAD',
-        [
-          Arel::Nodes::NamedFunction.new('ROW_NUMBER', [])
-            .over(Arel::Nodes::Window.new.partition(parent_column).order(order_column)),
-          Arel::SelectManager.new.project(
-            Arel::Nodes::NamedFunction.new('LENGTH', [Arel.star.count])
-          ).from(arel_table),
-          Arel::Nodes.build_quoted('0')
-        ],
-      ).as('child_number')
-    )
+    row_number = Arel::Nodes::NamedFunction.new('ROW_NUMBER', [])
+      .over(Arel::Nodes::Window.new.partition(parent_column).order(order_column))
+    width = Arel::SelectManager.new.project(
+      Arel::Nodes::NamedFunction.new('LENGTH', [Arel.star.count])
+    ).from(arel_table)
+
+    pad_expr = if connection.adapter_name == 'Mysql2'
+      Arel::Nodes::NamedFunction.new('LPAD', [row_number, width, Arel::Nodes.build_quoted('0')])
+    else
+      # SQLite: printf('%0' || width || 'd', row_number)
+      fmt = Arel::Nodes::InfixOperation.new('||',
+        Arel::Nodes::InfixOperation.new('||', Arel::Nodes.build_quoted('%0'), width),
+        Arel::Nodes.build_quoted('d')
+      )
+      Arel::Nodes::NamedFunction.new('printf', [fmt, row_number])
+    end
+
+    select(arel_table[Arel.star], pad_expr.as('child_number'))
  }

  def to_s
@@ -102,7 +110,7 @@ class Quantity < ApplicationRecord

  def to_s_with_depth
    # em space, U+2003
-    ' ' * depth + name
+    ' ' * depth + name
  end

  def destroyable?
@@ -115,16 +123,18 @@ class Quantity < ApplicationRecord

  # Common ancestors, assuming node is a descendant of itself
  scope :common_ancestors, ->(of) {
-    selected = Arel::Table.new('selected')
+    q_common = Arel::Table.new('q_common')

    # Take unique IDs, so self can be called with parent nodes of collection to
    # get common ancestors of collection _excluding_ nodes in collection.
    uniq_of = of.uniq
-    model.with(selected: self).with_recursive(arel_table.name => [
-      selected.project(selected[Arel.star]).where(selected[:id].in(uniq_of)),
-      selected.project(selected[Arel.star])
-        .join(arel_table).on(selected[:id].eq(arel_table[:parent_id]))
+    model.with(selected: self).with_recursive(q_common: [
+      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .where(arel_table[:id].in(uniq_of)),
+      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .joins("INNER JOIN q_common ON selected.id = q_common.parent_id")
    ]).select(arel_table[Arel.star])
+      .from(q_common.as(arel_table.name))
      .group(column_names)
      .having(arel_table[:id].count.eq(uniq_of.size))
      .order(arel_table[:depth].desc)
@@ -132,13 +142,9 @@ class Quantity < ApplicationRecord

  # Return: successive record in order of appearance; used for partial view reload
  def successive
-    quantities = Quantity.arel_table
-    Quantity.with(
-      quantities: user.quantities.ordered.select(
-        quantities[Arel.star],
-        Arel::Nodes::NamedFunction.new('LAG', [quantities[:id]]).over.as('lag_id')
-      )
-    ).where(quantities[:lag_id].eq(id)).first
+    ordered = user.quantities.ordered.to_a
+    idx = ordered.index { |q| q.id == id }
+    ordered[idx + 1] if idx
  end

  def with_progenies
@@ -151,13 +157,14 @@ class Quantity < ApplicationRecord

  # Return: record with ID `of` with its ancestors, sorted by :depth
  scope :with_ancestors, ->(of) {
-    selected = Arel::Table.new('selected')
+    q_ancestors = Arel::Table.new('q_ancestors')

-    model.with(selected: self).with_recursive(arel_table.name => [
-      selected.project(selected[Arel.star]).where(selected[:id].eq(of)),
-      selected.project(selected[Arel.star])
-        .join(arel_table).on(selected[:id].eq(arel_table[:parent_id]))
-    ])
+    model.with(selected: self).with_recursive(q_ancestors: [
+      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .where(arel_table[:id].eq(of)),
+      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .joins("INNER JOIN q_ancestors ON selected.id = q_ancestors.parent_id")
+    ]).from(q_ancestors.as(arel_table.name))
  }

  # Return: ancestors of (possibly destroyed) self
--- a/app/models/unit.rb
+++ b/app/models/unit.rb
@@ -13,7 +13,7 @@ class Unit < ApplicationRecord
  end
  validates :symbol, presence: true, uniqueness: {scope: :user_id},
    length: {maximum: type_for_attribute(:symbol).limit}
-  validates :description, length: {maximum: type_for_attribute(:description).limit}
+  validates :description, length: {maximum: type_for_attribute(:description).limit} if type_for_attribute(:description).limit
  validates :multiplier, numericality: {equal_to: 1}, unless: :base
  validates :multiplier, numericality: {greater_than: 0, precision: true, scale: true}, if: :base

@@ -22,59 +22,72 @@ class Unit < ApplicationRecord
    actionable_units = Arel::Table.new('actionable_units')
    units = actionable_units.alias('units')
    bases_units = arel_table.alias('bases_units')
-    other_units = arel_table.alias('other_units')
-    other_bases_units = arel_table.alias('other_bases_units')
+    # Use 'all_units' alias for correlated subqueries to reference the all_units CTE.
+    # Cannot use arel_table.alias here because the CTE is named 'all_units', not 'units'.
+    other_units = Arel::Table.new('all_units').alias('other_units')
+    other_bases_units = Arel::Table.new('all_units').alias('other_bases_units')
    sub_units = arel_table.alias('sub_units')

-    # TODO: move inner 'with' CTE to outer 'with recursive' - it can have multiple
-    # CTEs, even non recursive ones.
-    Unit.with_recursive(actionable_units: [
-      Unit.with(units: self.or(Unit.defaults)).left_joins(:base)
-        .where.not(
-          # Exclude Units that are/have default counterpart
-          Arel::SelectManager.new.project(1).from(other_units)
-            .outer_join(other_bases_units)
-            .on(other_units[:base_id].eq(other_bases_units[:id]))
-            .where(
-              other_bases_units[:symbol].is_not_distinct_from(bases_units[:symbol])
-                .and(other_units[:symbol].eq(arel_table[:symbol]))
-                .and(other_units[:user_id].is_distinct_from(arel_table[:user_id]))
-            ).exists
-        )
-        .select(
-          arel_table[Arel.star],
-          # Decide if Unit can be im-/exported based on existing hierarchy:
-          # * same base unit symbol has to exist
-          # * unit with subunits can only be ported to root
-          arel_table[:base_id].eq(nil).or(
-            (
-              Arel::SelectManager.new.project(1).from(other_units)
-                .join(sub_units).on(other_units[:id].eq(sub_units[:base_id]))
-                .where(
-                  other_units[:symbol].eq(arel_table[:symbol])
-                    .and(other_units[:user_id].is_distinct_from(arel_table[:user_id]))
-                ).exists.not
-            ).and(
-              Arel::SelectManager.new.project(1).from(other_bases_units)
-                .where(
-                  other_bases_units[:symbol].is_not_distinct_from(bases_units[:symbol])
-                    .and(other_bases_units[:user_id].is_distinct_from(bases_units[:user_id]))
-                ).exists
-            )
-          ).as('portable')
-        ),
-      # Fill base Units to display proper hierarchy. Duplicates will be removed
-      # by final group() - can't be deduplicated with UNION due to 'portable' field.
-      arel_table.join(actionable_units).on(actionable_units[:base_id].eq(arel_table[:id]))
-        .project(arel_table[Arel.star], Arel::Nodes.build_quoted(nil).as('portable'))
-    ]).select(units: [:base_id, :symbol])
+    Unit.with_recursive(
+      # Renamed from 'units' to 'all_units' to avoid SQLite circular reference:
+      # SQLite treats any CTE in WITH RECURSIVE that references a table with the same
+      # name as the CTE itself as a circular reference, even for non-recursive CTEs.
+      all_units: self.or(Unit.defaults),
+      actionable_units: [
+        # Read from all_units CTE (user+defaults) aliased as the units table name.
+        # Using AR::Relation (not Arel::SelectManager) to avoid extra parentheses
+        # around the UNION part (visit_Arel_SelectManager always wraps in parens).
+        Unit.from(Arel::Table.new('all_units').as(arel_table.name))
+          .joins("LEFT OUTER JOIN all_units bases_units ON bases_units.id = units.base_id")
+          .where.not(
+            # Exclude Units that are/have default counterpart
+            Arel::SelectManager.new.project(1).from(other_units)
+              .outer_join(other_bases_units)
+              .on(other_units[:base_id].eq(other_bases_units[:id]))
+              .where(
+                other_bases_units[:symbol].is_not_distinct_from(bases_units[:symbol])
+                  .and(other_units[:symbol].eq(arel_table[:symbol]))
+                  .and(other_units[:user_id].is_distinct_from(arel_table[:user_id]))
+              ).exists
+          )
+          .select(
+            arel_table[Arel.star],
+            # Decide if Unit can be im-/exported based on existing hierarchy:
+            # * same base unit symbol has to exist
+            # * unit with subunits can only be ported to root
+            arel_table[:base_id].eq(nil).or(
+              (
+                Arel::SelectManager.new.project(1).from(other_units)
+                  .join(sub_units).on(other_units[:id].eq(sub_units[:base_id]))
+                  .where(
+                    other_units[:symbol].eq(arel_table[:symbol])
+                      .and(other_units[:user_id].is_distinct_from(arel_table[:user_id]))
+                  ).exists.not
+              ).and(
+                Arel::SelectManager.new.project(1).from(other_bases_units)
+                  .where(
+                    other_bases_units[:symbol].is_not_distinct_from(bases_units[:symbol])
+                      .and(other_bases_units[:user_id].is_distinct_from(bases_units[:user_id]))
+                  ).exists
+              )
+            ).as('portable')
+          ),
+        # Fill base Units to display proper hierarchy. Duplicates will be removed
+        # by final group() - can't be deduplicated with UNION due to 'portable' field.
+        # Using AR::Relation instead of Arel::SelectManager to avoid extra parentheses
+        # around the UNION part (visit_Arel_SelectManager always wraps in parens).
+        Unit.from(Arel::Table.new('all_units').as(arel_table.name))
+          .joins("INNER JOIN actionable_units ON actionable_units.base_id = units.id")
+          .select(arel_table[Arel.star], Arel::Nodes.build_quoted(nil).as('portable'))
+      ]
+    ).select(units: [:base_id, :symbol])
      .select(
        units[:id].minimum.as('id'), # can be ANY_VALUE()
        units[:user_id].minimum.as('user_id'), # prefer non-default
        Arel::Nodes.build_quoted(1).as('multiplier'), # disregard multiplier when sorting
        units[:portable].minimum.as('portable')
      )
-      .from(units).group(:base_id, :symbol)
+      .from(units).group(units[:base_id], units[:symbol])
  }
  scope :ordered, ->{
    left_outer_joins(:base).order(ordering)
@@ -84,7 +97,7 @@ class Unit < ApplicationRecord
    [arel_table.coalesce(Arel::Table.new(:bases_units)[:symbol], arel_table[:symbol]),
     arel_table[:base_id].not_eq(nil),
     :multiplier,
-     :symbol]
+     arel_table[:symbol]]
  end

  before_destroy do
--- a/app/views/default/units/_unit.html.erb
+++ b/app/views/default/units/_unit.html.erb
@@ -5,7 +5,7 @@
  </td>

  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <% unless unit.portable.nil? %>
        <% if unit.default? %>
          <%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
--- a/app/views/default/units/index.html.erb
+++ b/app/views/default/units/index.html.erb
@@ -8,7 +8,7 @@
    class: 'tools-area' %>
 </div>

-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,10 +23,10 @@
  </head>

  <body>
-    <header class="flex">
+    <header class="hflex">
      <%= image_link_to t(".source_code"), "code-braces", source_code_url %>
      <%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
-        class: "rextend" %>
+            class: "extendedright" %>
      <% if user_signed_in? %>
        <%= image_link_to_unless_current(current_user, "account-wrench-outline",
          edit_user_registration_path) %>
--- a/app/views/measurements/_form.html.erb
+++ b/app/views/measurements/_form.html.erb
@@ -1,37 +1,28 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area flex vertical center',
-  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-
-  <table class="items-table center">
-    <tbody id="readouts">
-      <%= tabular_fields_for @measurement do |form| %>
-        <tr class="italic">
-          <td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
-          <td colspan="3" class="ralign">
-            <%= form.datetime_field :taken_at, required: true %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
+  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  <table class="items centered">
+    <tbody id="readouts"></tbody>
  </table>

-  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
-  <details id="quantity_select" class="center hexpand" open
-           onkeydown="detailsProcessKey(event)">
-    <summary autofocus>
-      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-      <span data-prompt="<%= t('.select_quantity') %>">
-        <%= t('.select_quantity') %>
-      </span>
-      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
-        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-        data: {turbo_stream: true} %>
-    </summary>
-    <ul><%= quantities_check_boxes(@quantities) %></ul>
-  </details>
-
-  <div class="flex reverse">
+  <div class="hflex">
+    <%# TODO: right-click selection %>
+    <details id="quantity_select" class="hexpand" open
+             onkeydown="detailsProcessKey(event)">
+      <summary autofocus>
+        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+        <span data-prompt="<%= t('.select_quantity') %>">
+          <%= t('.select_quantity') %>
+        </span>
+        <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+          formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+          data: {turbo_stream: true} %>
+      </summary>
+      <ul><%= quantities_check_boxes %></ul>
+    </details>
    <%= form.button id: :create_measurement_button, disabled: true -%>
+  </div>
+
+  <div class="hflex reverse">
    <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
      class: 'dangerous', onclick: render_turbo_stream('form_close') %>
  </div>
--- a/app/views/quantities/_form.html.erb
+++ b/app/views/quantities/_form.html.erb
@@ -9,7 +9,7 @@
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>

-    <td class="flex">
+    <td class="actions">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/quantities/_quantity.html.erb
+++ b/app/views/quantities/_quantity.html.erb
@@ -5,14 +5,14 @@
           data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
                  drop_id_param: "quantity[parent_id]"} do %>

-  <td style="--depth:<%= quantity.depth %>">
-    <%= link_to quantity, edit_quantity_path(quantity), class: 'link',
-      onclick: 'this.blur();', data: {turbo_stream: true} %>
+  <td class="link" style="--depth:<%= quantity.depth %>">
+    <%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
+      data: {turbo_stream: true} %>
  </td>
  <td><%= quantity.description %></td>

  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
        id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>

--- a/app/views/quantities/index.html.erb
+++ b/app/views/quantities/index.html.erb
@@ -8,14 +8,13 @@
    class: 'tools-area' %>
 </div>

-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div class: 'main-area', id: :quantity_form %>

-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Quantity.human_attribute_name(:name) %></th>
-      <th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
+      <th><%= Quantity.human_attribute_name(:description) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
        <th></th>
--- a/app/views/readouts/_form.html.erb
+++ b/app/views/readouts/_form.html.erb
@@ -1,24 +1,25 @@
 <%# TODO: add readout reordering by dragging %>
 <%= tabular_fields_for 'readouts[]', readout do |form| %>
  <%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
-    <td>
-      <%# TODO: add grayed readout index (in separate column?) %>
-      <%= readout.quantity.relative_pathname(@superquantity) %>
-      <%= form.hidden_field :quantity_id %>
-    </td>
-    <td>
-      <%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
-    </td>
-    <td>
-      <%= form.collection_select :unit_id, @user_units, :id,
-        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
-        {prompt: '', disabled: '', selected: ''}, required: true %>
-    </td>
-    <td class="flex">
+    <td class="actions">
      <%# TODO: change to _link_ after giving up displaying relative paths %>
      <%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
        formaction: discard_readouts_path(readout.quantity),
        formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
    </td>
+    <td>
+      <%= readout.quantity.relative_pathname(@superquantity) %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true,
+        size: readout.type_for_attribute(:value).precision / 2,
+        autofocus: readout_counter == 0 %>
+    </td>
+    <td>
+      <%= form.hidden_field :quantity_id %>
+      <%= form.collection_select :unit_id, @user_units, :id,
+        ->(u){ sanitize('&emsp;' * (u.base_id ? 1 : 0) + u.symbol) },
+        {prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
+    </td>
  <% end %>
 <% end %>
--- a/app/views/units/_form.html.erb
+++ b/app/views/units/_form.html.erb
@@ -8,11 +8,11 @@
    <td>
      <%= form.text_area :description, cols: 30, rows: 1, escape: false %>
    </td>
-    <td>
+    <td class="number">
      <%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
    </td>

-    <td class="flex">
+    <td class="actions">
      <%= form.button %>
      <%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
        name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
--- a/app/views/units/_unit.html.erb
+++ b/app/views/units/_unit.html.erb
@@ -6,15 +6,14 @@
                  drop_id: dom_id(unit.base || unit),
                  drop_id_param: "unit[base_id]"} do %>

-  <td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
-    <%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
-      data: {turbo_stream: true} %>
+  <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>
-  <td class="ralign"><%= unit.multiplier.to_html %></td>
+  <td class="number"><%= unit.multiplier.to_html %></td>

  <% if current_user.at_least(:active) %>
-    <td class="flex">
+    <td class="actions">
      <% unless unit.base_id? %>
        <%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
          id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
--- a/app/views/units/index.html.erb
+++ b/app/views/units/index.html.erb
@@ -7,14 +7,13 @@
    class: 'tools-area' %>
 </div>

-<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
 <%= tag.div id: :unit_form %>

-<table class="main-area items-table">
+<table class="main-area items">
  <thead>
    <tr>
      <th><%= Unit.human_attribute_name(:symbol) %></th>
-      <th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
+      <th><%= Unit.human_attribute_name(:description) %></th>
      <th><%= Unit.human_attribute_name(:multiplier) %></th>
      <% if current_user.at_least(:active) %>
        <th><%= t :actions %></th>
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,4 +1,4 @@
-<table class="main-area items-table" id="users">
+<table class="main-area items" id="users">
  <thead>
    <tr>
      <th><%= User.human_attribute_name(:email) %></th>
@@ -11,7 +11,7 @@
  <tbody>
    <% @users.each do |user| %>
      <tr>
-        <td><%= link_to user, user_path(user), class: 'link' %></td>
+        <td class="link"><%= link_to user, user_path(user) %></td>
        <td>
          <% if user == current_user %>
            <%= user.status %>
@@ -22,11 +22,11 @@
            <% end %>
          <% end %>
        </td>
-        <td>
+        <td class="svg">
          <%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
        </td>
        <td><%= l user.created_at, format: :without_tz %></td>
-        <td class="flex">
+        <td class="actions">
          <% if allow_disguise?(user) %>
            <%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
          <% end %>
--- a/app/views/users/profiles/new.html.erb
+++ b/app/views/users/profiles/new.html.erb
@@ -10,6 +10,7 @@

  <%= f.submit t(:register), data: {turbo: false} %>

+  <%# TODO: fix button text color after change link -> button %>
  <%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
    class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
    data: {validate: f.field_id(:email)} %>
--- a/app/views/users/unlocks/new.html.erb
+++ b/app/views/users/unlocks/new.html.erb
@@ -8,7 +8,7 @@
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

-  <div class="flex">
+  <div class="actions">
    <%= f.submit "Resend unlock instructions" %>
  </div>
 <% end %>
--- a/config/application.rb.dist
+++ b/config/application.rb.dist
@@ -20,10 +20,6 @@ Bundler.require(*Rails.groups)

 module FixinMe
  class Application < Rails::Application
-    # Allow RAILS_DATABASE_YML to override the database config file path.
-    # Used by `rails test:all_databases` to test against multiple DB adapters.
-    config.paths['config/database'] = [ENV['RAILS_DATABASE_YML']] if ENV['RAILS_DATABASE_YML']
-
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.0

--- a/config/database.yml.dist
+++ b/config/database.yml.dist
@@ -48,26 +48,3 @@ production:
 #test:
 #  <<: *default
 #  database: fixinme_test
-
-# Multi-database testing — `bundle exec rails test:all_databases`
-# ---------------------------------------------------------------
-# Add any number of `test_<name>:` blocks to run the full test suite
-# against additional database adapters in a single command.
-# Each adapter's gem must be available in the bundle:
-#   bundle config --local with "mysql:sqlite"   # mysql + sqlite
-#   bundle config --local with "mysql:pg"       # mysql + postgresql
-#
-# Example — run tests against MySQL and SQLite:
-#
-#test_sqlite:
-#  adapter: sqlite3
-#  database: db/fixinme_test.sqlite3
-#
-# Example — run tests against MySQL and PostgreSQL:
-#
-#test_pg:
-#  adapter: postgresql
-#  database: fixinme_test
-#  username: fixinme
-#  password: Some-password1%
-#  host: localhost
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -85,10 +85,12 @@ en:
    navigation: Measurements
    no_items: There are no measurements taken. You can Add some now.
    form:
-      select_quantity: select quantities...
-      taken_at_html: Measurement taken at&emsp;
+      select_quantity: select the measured quantities...
    index:
      new_measurement: Add measurement
+  readouts:
+    form:
+      select_unit: ...
  quantities:
    navigation: Quantities
    no_items: There are no configured quantities. You can Add some or Import from defaults.
--- a/db/migrate/20250121230456_create_readouts.rb
+++ b/db/migrate/20250121230456_create_readouts.rb
@@ -1,14 +1,10 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
  def change
    create_table :readouts do |t|
-      # Reference :user through :quantity (:measurement may be NULL).
-      t.references :measurement, foreign_key: true
+      t.references :user, null: false, foreign_key: true
      t.references :quantity, null: false, foreign_key: true
-      # :category + :value + :unit as a separate table? (NumericValue, TextValue)
-      t.integer :category, null: false, default: 0
-      t.float :value, null: false, limit: Float::MANT_DIG
      t.references :unit, foreign_key: true
-      # Move to Measurement?
+      t.decimal :value, null: false, precision: 30, scale: 15
      #t.references :collector, foreign_key: true
      #t.references :device, foreign_key: true

--- a/lib/tasks/test_databases.rake
+++ b/lib/tasks/test_databases.rake
@@ -1,118 +0,0 @@
-require 'yaml'
-require 'erb'
-require 'tmpdir'
-
-namespace :test do
-  desc <<~DESC
-    Run the full test suite against every test database configured in database.yml.
-
-    Any top-level key that starts with "test" and contains a Hash is treated as a
-    test database configuration:
-
-      test:           # always required — the primary test database
-        adapter: mysql2
-        database: fixinme_test
-        ...
-
-      test_sqlite:    # optional additional databases
-        adapter: sqlite3
-        database: db/fixinme_test.sqlite3
-
-      test_pg:
-        adapter: postgresql
-        database: fixinme_test
-        ...
-
-    For each database the task will:
-      1. Check that the required adapter gem is available (skip with warning if not).
-      2. Run `rails db:test:prepare` to create/migrate the database.
-      3. Run `rails test` and record pass/fail.
-
-    A summary is printed at the end. The task exits non-zero if any database fails.
-  DESC
-  task :all_databases do
-    db_file    = Rails.root.join('config', 'database.yml')
-    all        = YAML.safe_load(ERB.new(db_file.read).result, aliases: true) || {}
-    test_cfgs  = all.select { |k, v| k.to_s.start_with?('test') && v.is_a?(Hash) }
-    non_test   = all.reject { |k, _| k.to_s.start_with?('test') }
-
-    abort "No test database configurations found in #{db_file}." if test_cfgs.empty?
-
-    results = {}
-
-    test_cfgs.each do |name, config|
-      adapter = config['adapter'].to_s
-
-      puts "\n#{'─' * 64}"
-      puts "  #{name}  (adapter: #{adapter})"
-      puts '─' * 64
-
-      unless adapter_available?(adapter)
-        puts "  SKIPPED — gem for '#{adapter}' adapter not available in bundle."
-        puts "  Add it to Gemfile (e.g. `bundle config --local with #{adapter_group(adapter)}`)"
-        results[name] = :skipped
-        next
-      end
-
-      Dir.mktmpdir('rails_test_db_') do |tmpdir|
-        tmp_yml = File.join(tmpdir, 'database.yml')
-        # Write a standalone database.yml with just this config as `test:`
-        # (non-test configs are preserved so boot doesn't fail on `production:` lookup)
-        File.write(tmp_yml, non_test.merge('test' => config).to_yaml)
-
-        env = { 'RAILS_DATABASE_YML' => tmp_yml }
-
-        if system(env, 'bundle exec rails db:test:prepare')
-          results[name] = system(env, 'bundle exec rails test') ? :pass : :fail
-        else
-          results[name] = :prepare_failed
-        end
-      end
-    end
-
-    puts "\n#{'═' * 64}"
-    puts "  SUMMARY"
-    puts '═' * 64
-    results.each do |name, status|
-      adapter = test_cfgs[name]['adapter']
-      icon    = { pass: '✓', fail: '✗', prepare_failed: '✗', skipped: '–' }[status]
-      label   = { pass: 'PASS', fail: 'FAIL',
-                  prepare_failed: 'PREPARE FAILED', skipped: 'SKIPPED' }[status]
-      puts "  #{icon}  #{name.ljust(26)} (#{adapter.ljust(12)})  #{label}"
-    end
-    puts '═' * 64
-
-    failed = results.count { |_, s| s == :fail || s == :prepare_failed }
-    abort "\n  #{failed} database(s) failed." if failed > 0
-  end
-end
-
-private
-
-# Returns true if the gem required for this adapter is loadable.
-ADAPTER_GEMS = {
-  'mysql2'     => 'mysql2',
-  'sqlite3'    => 'sqlite3',
-  'postgresql' => 'pg',
-  'pg'         => 'pg',
-}.freeze
-
-def adapter_available?(adapter)
-  gem_name = ADAPTER_GEMS.fetch(adapter, adapter)
-  require gem_name
-  true
-rescue LoadError
-  false
-end
-
-# Returns the Bundler group name that installs the adapter gem.
-ADAPTER_GROUPS = {
-  'mysql2'     => 'mysql',
-  'sqlite3'    => 'sqlite',
-  'postgresql' => 'postgresql',
-  'pg'         => 'postgresql',
-}.freeze
-
-def adapter_group(adapter)
-  ADAPTER_GROUPS.fetch(adapter, adapter)
-end