Fix ElementClickInterceptedError in test_update_status_fails_for_admin

The test injects a submit button into a table row to simulate an
unauthorized PATCH request, verifying the server returns 422. The
button was obscured by a full-row <a class="link"> overlay, causing
Selenium to throw ElementClickInterceptedError.

Since the test exercises server-side authorization rather than UI
behavior, switched to a JS click via execute_script to bypass the
visual interception check.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

DESIGN.md

@@ -0,0 +1,34 @@
+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

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 fill="#ffffff" 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 d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>

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 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>
+<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>

app/assets/stylesheets/application.css

@@ -18,10 +18,14 @@
 /* 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)
+ * differently depending on context (e.g. <form>; <a> as link/button),
+ * * styles with multiple selectors should have all selectors with same
+ * specificity, to allow proper rule specificity vs order management.
  *
- * NOTE: Style in a modular way, similar to how CSS @scope would be used,
+ * NOTE: style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available */
+ * to make transition easier once @scope is widely available. */
+/* TODO: review styles with multiple selectors and try to convert them to the same
+ * specificity. */
 :root {
   --color-focus-gray: #f3f3f3;
   --color-border-gray: #dddddd;
@@ -53,12 +57,28 @@
 :focus-visible {
   outline: none;
 }
+/* NOTE: move to higher priority layer instead of using !important? */
+/* TODO: 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
+ *  blue - target for interaction with pointer,
- *  gray - target for interaction with keyboard
+ *  gray - target for interaction with keyboard,
- *  red - destructive, non-undoable action
+ *  red - destructive, non-undoable action.
  */
 button,
 details,
@@ -73,56 +93,17 @@ 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: solid 1px var(--color-gray);
+  border: 1px solid var(--color-gray);
   border-radius: 0.25em;
+  padding: 0.2em 0.4em;
 }
-[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);
@@ -130,17 +111,20 @@ 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 in input number fields */
+/* Hide spin buttons of <input type=number>. */
-/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
+/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
 input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
+  text-align: end;
 }
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -149,37 +133,108 @@ input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.button > svg,
+/* Text color of table form controls:
-.tab > svg,
+ *  - black for row/table forms,
-button > svg {
+ *  - inherited for internal (column specific) buttons/forms. */
-  height: 1.4em;
+table input,
-  width: 1.4em;
+table select,
+table summary,
+table textarea {
+  border-color: var(--color-border-gray);
 }
-.button > svg:not(:last-child),
+table input,
-.tab > svg:not(:last-child),
+table select,
-button > svg:not(:last-child) {
+table textarea {
-  margin-right: 0.2em;
+  padding-block: 0.375em;
 }
-/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+table form input,
- * page-wide, top-level) and remove from table.items - as the style should be
+table form select,
- * same everywhere */
+table form summary,
-.button:focus-visible,
+table form textarea {
-button:focus-visible,
+  color: inherit;
-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;
 }
-.button:hover,
+input:hover,
-button:hover,
+select:hover,
-input[type=submit]: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;
+}
+[name=cancel],
+.auxiliary {
+  border-color: var(--color-border-gray);
+  color: var(--color-nav-gray);
+  fill: var(--color-nav-gray);
+}
+.button > svg,
+.tab > svg {
+  height: 1.4em;
+  width: 1.4em;
+}
+.button > svg:not(:last-child),
+.tab > svg:not(:last-child) {
+  margin-right: 0.2em;
+}
+.button:focus-visible,
+.tab:focus-visible,
+.tab:hover {
+  background-color: var(--color-focus-gray);
+}
+.button:hover {
   background-color: var(--color-blue);
   border-color: var(--color-blue);
   color: white;
@@ -189,23 +244,17 @@ input[type=submit]:hover {
   background-color: var(--color-red);
   border-color: var(--color-red);
 }
-input:hover,
+table .button {
-select:hover,
+  border-color: var(--color-border-gray);
-summary:hover,
+  color: var(--color-table-gray);
-textarea:hover {
+  font-weight: normal;
-  border-color: var(--color-blue);
+  height: 100%;
-  outline: solid 1px var(--color-blue);
+  padding: 0.4em;
-}
-select:hover,
-summary:hover {
-  cursor: pointer;
-}
-input:invalid,
-select:invalid,
-textarea:invalid {
-  border-color: var(--color-red);
-  outline: solid 1px var(--color-red);
 }
+/* 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. */
+/* TODO: apply link class to non-button/-tab links. Add light underscore for links? */
 input[type=text]:read-only,
 textarea:read-only {
   border: none;
@@ -213,8 +262,8 @@ textarea:read-only {
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible
+/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * with grid-collapse property and remove alternative grid-template
+ * `grid-collapse` property and remove alternative `grid-template-areas`.
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -247,18 +296,14 @@ header {
   margin-inline-start: 4%;
 }
 .navigation > .tab {
-  border-bottom: solid 2px var(--color-nav-gray);
+  border-bottom: 2px solid 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: solid 4px var(--color-blue);
+  border-bottom: 4px solid var(--color-blue);
   color: var(--color-blue);
   fill: var(--color-blue);
 }
@@ -290,7 +335,7 @@ header {
 
 #flashes {
   display: grid;
-  gap: 0.2em;
+  row-gap: 0.4em;
   grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
@@ -306,49 +351,42 @@ header {
   display: grid;
   grid-column: 2/5;
   grid-template-columns: subgrid;
+  line-height: 2.2em;
   pointer-events: auto;
 }
-.flash.alert:before {
+.flash:before {
-  content: url('pictograms/alert-outline.svg');
+  filter: invert();
   height: 1.4em;
   margin: 0 0.5em;
   width: 1.4em;
 }
+.flash.alert:before {
+  content: url('pictograms/alert-outline.svg');
+}
 .flash.alert {
   border-color: var(--color-red);
   background-color: var(--color-red);
 }
 .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 > div {
+.flash svg {
-  grid-column: 2;
-}
-/* NOTE: currently flash button inherits some unnecessary styles from generic
- * button. */
-.flash > button {
-  border: none;
-  color: inherit;
   cursor: pointer;
-  font-size: 1.4em;
+  fill: white;
-  font-weight: bold;
+  height: 2.2em;
-  grid-column: 3;
   opacity: 0.6;
-  padding: 0.2em 0.4em;
+  padding: 0.4em 0.5em;
+  width: 2.4em;
 }
-.flash > button:hover {
+.flash svg:hover {
   opacity: 1;
 }
 
 
-/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
 .labeled-form {
   align-items: center;
   display: grid;
@@ -365,7 +403,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);
 }
@@ -385,180 +423,146 @@ 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;
+}
+.tabular-form table td {
+  border: none;
+  text-align: left;
+  vertical-align: middle;
+}
+.tabular-form table td:first-child {
+  color: inherit;
+}
 
-/* TODO: remove .items class (?) and make 'form table' work properly */
+
-table.items {
+.items-table {
   border-spacing: 0;
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: 0.25em;
   font-size: 0.85rem;
   text-align: left;
 }
-table:not(:has(tr)) {
+.items-table thead {
-  display: none;
-}
-table.items thead {
   font-size: 0.8rem;
 }
-table.items thead,
+.items-table thead,
-table.items tbody tr:hover {
+.items-table tbody tr:hover {
   background-color: var(--color-focus-gray);
 }
-table.items th {
+.items-table th {
   padding-block: 0.75em;
   text-align: center;
 }
-table.items th,
+.items-table th,
-table.items td {
+.items-table td {
   padding-inline: 1em 0;
 }
-/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
-table.items td.link {
+.items-table td.link {
   padding: 0;
   position: relative;
 }
-table.items td.link a {
+.items-table td.link a {
   color: inherit;
   font: inherit;
 }
-table.items td.link a::after {
+.items-table td.link a::after {
   content: '';
   inset: 0;
   position: absolute;
 }
-table.items td:first-child {
+.items-table td:first-child {
   padding-inline-start: calc(1em + var(--depth) * 0.8em);
 }
-table.items td:has(input, select, textarea) {
+.items-table td:has(input, select, textarea) {
   padding-inline-start: calc(0.6em - 0.9px);
 }
-table.items td:first-child:has(input, select, textarea) {
+.items-table td:first-child:has(input, select, textarea) {
   padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
 }
-table.items th:last-child {
+.items-table th:last-child {
   padding-inline-end: 0.4em;
 }
-table.items td:last-child {
+.items-table td:last-child {
   padding-inline-end: 0.1em;
 }
-table.items td {
+.items-table td {
-  border-top: solid 1px var(--color-border-gray);
+  border-top: 1px solid var(--color-border-gray);
   height: 2.4em;
   padding-block: 0.1em;
 }
-table.items .actions {
+.items-table .actions {
   display: flex;
   gap: 0.4em;
   justify-content: end;
 }
-table.items .actions.centered {
+.items-table .actions.centered {
   justify-content: center;
 }
-table.items tr.dropzone {
+.items-table tr.dropzone {
   position: relative;
 }
-table.items tr.dropzone::after {
+.items-table tr.dropzone::after {
   content: '';
   inset: 1px 0 0 0;
   position: absolute;
-  outline: dashed 2px var(--color-blue);
+  outline: 2px dashed var(--color-blue);
   outline-offset: -1px;
   z-index: var(--z-index-table-row-outline);
 }
-table.items td.handle {
+.items-table td.handle {
   cursor: move;
 }
-table.items tr.form td {
+.items-table tr.form td {
   vertical-align: top;
 }
 
-/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
+/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
-/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
+/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
-table.items td.link a:hover,
+.items-table td.link a:hover,
-table.items td.link a:focus-visible,
+.items-table td.link a:focus-visible,
-table.items td.link a:hover:focus-visible {
+.items-table 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 {
+.items-table td.link a:hover {
   color: var(--color-blue);
 }
-table.items td.link a:focus-visible {
+.items-table td.link a:focus-visible {
   text-decoration-color: var(--color-gray);
 }
-table.items td.link a:hover:focus-visible {
+.items-table td.link a:hover:focus-visible {
   color: var(--color-dark-blue);
 }
 
-table.items td:not(:first-child),
+.items-table td:not(:first-child),
 .grayed {
   color: var(--color-table-gray);
   fill: var(--color-table-gray);
 }
-table.items svg {
+.items-table svg {
   height: 1rem;
   vertical-align: middle;
   width: 1rem;
 }
-table.items svg:last-child {
+.items-table svg:last-child {
   height: 1.2rem;
   width: 1.2rem;
 }
-table.items td.svg {
+.items-table td.svg {
   text-align: center;
 }
-table.items td.number {
+.items-table 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;
-}
 
 
 .centered {
@@ -586,22 +590,18 @@ form table.items td:first-child {
   font-size: 0.9rem;
   text-align: center;
 }
+.hmin50 {
+  min-width: 50%;
+}
+.italic {
+  color: var(--color-gray);
+  font-style: italic;
+}
 .vflex {
   display: flex;
   gap: 0.8em;
   flex-direction: column;
 }
-[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;
-}
 
 
 details {
@@ -612,12 +612,12 @@ summary {
   align-items: center;
   color: var(--color-gray);
   display: flex;
-  gap: 0.2em;
+  gap: 0.4em;
   height: 100%;
   white-space: nowrap;
 }
 summary::before {
-  background-color: #000;
+  background-color: currentColor;
   content: "";
   height: 1em;
   mask-image: url('pictograms/chevron-down.svg');
@@ -629,7 +629,7 @@ summary:has(.button) {
   padding-inline-end: 0;
 }
 summary .button {
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: inherit;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -640,15 +640,15 @@ summary span {
   width: 100%;
 }
 details[open] summary::before {
-  transform: rotate(180deg);
+  transform: scaleY(-1);
 }
 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: white;
-  border: solid 1px var(--color-border-gray);
+  border: 1px solid var(--color-border-gray);
   border-radius: 0.25em;
   box-shadow: 1px 1px 3px var(--color-border-gray);
   margin: -1px 0 0 0;
@@ -670,3 +670,15 @@ li input[type=checkbox] {
 li::marker {
   content: '';
 }
+
+#measurement_form {
+  min-width: 66%;
+  width: max-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.
+ * */

app/helpers/application_helper.rb

@@ -12,6 +12,12 @@ 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)
@@ -96,20 +102,28 @@ module ApplicationHelper
 
     def number_field(method, options = {})
       attr_type = object.type_for_attribute(method)
-      if attr_type.type == :decimal
+      case attr_type.type
+      when :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
+      # #button does not use #objectify_options/@default_options
-      options.merge!(@options.slice(:form))
+      value, options = nil, value if value.is_a?(Hash)
+      options = options.merge(
+        @default_options.slice(:form),
+        class: @template.class_names('button', options[:class])
+      )
       super
     end
 
@@ -138,12 +152,14 @@ module ApplicationHelper
   end
 
   def tabular_form_with(**options, &block)
-    extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
+    extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
+                     html: {autocomplete: 'off'}}
     form_with(**merge_attributes(options, extra_options), &block)
   end
 
   def svg_tag(source, label = nil, options = {})
-    svg_tag = tag.svg(options) do
+    label, options = nil, label if label.is_a? Hash
+    svg_tag = tag.svg(**options) do
       tag.use(href: "#{image_path(source + ".svg")}#icon")
     end
     label.blank? ? svg_tag : svg_tag + tag.span(label)
@@ -212,9 +228,8 @@ module ApplicationHelper
       # Conversion of flash to Array only required because of Devise
       Array(messages).map do |message|
         tag.div class: "flash #{entry}" do
-          # TODO: change button text to svg to make it aligned vertically
+          tag.span(sanitize(message)) +
-          tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
+            svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
-                                                  onclick: "this.parentElement.remove();")
         end
       end
     end.join.html_safe

app/helpers/quantities_helper.rb

@@ -1,9 +1,9 @@
 module QuantitiesHelper
-  def quantities_check_boxes
+  def quantities_check_boxes(quantities)
     # 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

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} if type_for_attribute(:description).limit
+  validates :description, length: {maximum: type_for_attribute(:description).limit}
 
   # Update :depths of progenies after parent change
   before_save if: :parent_changed? do
@@ -61,22 +61,18 @@ class Quantity < ApplicationRecord
 
   # Return: ordered [sub]hierarchy
   scope :ordered, ->(root: nil, include_root: true) {
-    q_ordered = Arel::Table.new('q_ordered')
+    numbered = Arel::Table.new('numbered')
-    cast_type = connection.adapter_name == 'Mysql2' ? 'BINARY' : 'BLOB'
 
-    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(q_ordered: [
+    self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
-      Quantity.from(Arel::Table.new('numbered').as(arel_table.name))
+      numbered.project(
-        .select(
+        numbered[Arel.star],
-          arel_table[Arel.star],
+        numbered.cast(numbered[:child_number], 'BINARY').as('path')
-          arel_table.cast(arel_table[:child_number], cast_type).as('path')
+      ).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
-        ).where(arel_table[root && include_root ? :id : :parent_id].eq(root)),
+      numbered.project(
-      Quantity.from(Arel::Table.new('numbered').as(arel_table.name))
+        numbered[Arel.star],
-        .joins("INNER JOIN q_ordered ON quantities.parent_id = q_ordered.id")
+        arel_table[:path].concat(numbered[:child_number])
-        .select(
+      ).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
-          arel_table[Arel.star],
+    ]).order(arel_table[:path])
-          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
@@ -84,24 +80,20 @@ class Quantity < ApplicationRecord
   # be merged with :ordered
   # https://gist.github.com/ProGM/c6df08da14708dcc28b5ca325df37ceb#extending-arel
   scope :numbered, ->(parent_column, order_column) {
-    row_number = Arel::Nodes::NamedFunction.new('ROW_NUMBER', [])
+    select(
-      .over(Arel::Nodes::Window.new.partition(parent_column).order(order_column))
+      arel_table[Arel.star],
-    width = Arel::SelectManager.new.project(
+      Arel::Nodes::NamedFunction.new(
-      Arel::Nodes::NamedFunction.new('LENGTH', [Arel.star.count])
+        'LPAD',
-    ).from(arel_table)
+        [
-
+          Arel::Nodes::NamedFunction.new('ROW_NUMBER', [])
-    pad_expr = if connection.adapter_name == 'Mysql2'
+            .over(Arel::Nodes::Window.new.partition(parent_column).order(order_column)),
-      Arel::Nodes::NamedFunction.new('LPAD', [row_number, width, Arel::Nodes.build_quoted('0')])
+          Arel::SelectManager.new.project(
-    else
+            Arel::Nodes::NamedFunction.new('LENGTH', [Arel.star.count])
-      # SQLite: printf('%0' || width || 'd', row_number)
+          ).from(arel_table),
-      fmt = Arel::Nodes::InfixOperation.new('||',
+          Arel::Nodes.build_quoted('0')
-        Arel::Nodes::InfixOperation.new('||', Arel::Nodes.build_quoted('%0'), width),
+        ],
-        Arel::Nodes.build_quoted('d')
+      ).as('child_number')
-      )
+    )
-      Arel::Nodes::NamedFunction.new('printf', [fmt, row_number])
-    end
-
-    select(arel_table[Arel.star], pad_expr.as('child_number'))
   }
 
   def to_s
@@ -110,7 +102,7 @@ class Quantity < ApplicationRecord
 
   def to_s_with_depth
     # em space, U+2003
-    ' ' * depth + name
+    ' ' * depth + name
   end
 
   def destroyable?
@@ -123,18 +115,16 @@ class Quantity < ApplicationRecord
 
   # Common ancestors, assuming node is a descendant of itself
   scope :common_ancestors, ->(of) {
-    q_common = Arel::Table.new('q_common')
+    selected = Arel::Table.new('selected')
 
     # 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(q_common: [
+    model.with(selected: self).with_recursive(arel_table.name => [
-      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+      selected.project(selected[Arel.star]).where(selected[:id].in(uniq_of)),
-        .where(arel_table[:id].in(uniq_of)),
+      selected.project(selected[Arel.star])
-      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .join(arel_table).on(selected[:id].eq(arel_table[:parent_id]))
-        .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)
@@ -142,9 +132,13 @@ class Quantity < ApplicationRecord
 
   # Return: successive record in order of appearance; used for partial view reload
   def successive
-    ordered = user.quantities.ordered.to_a
+    quantities = Quantity.arel_table
-    idx = ordered.index { |q| q.id == id }
+    Quantity.with(
-    ordered[idx + 1] if idx
+      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
   end
 
   def with_progenies
@@ -157,14 +151,13 @@ class Quantity < ApplicationRecord
 
   # Return: record with ID `of` with its ancestors, sorted by :depth
   scope :with_ancestors, ->(of) {
-    q_ancestors = Arel::Table.new('q_ancestors')
+    selected = Arel::Table.new('selected')
 
-    model.with(selected: self).with_recursive(q_ancestors: [
+    model.with(selected: self).with_recursive(arel_table.name => [
-      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+      selected.project(selected[Arel.star]).where(selected[:id].eq(of)),
-        .where(arel_table[:id].eq(of)),
+      selected.project(selected[Arel.star])
-      Quantity.from(Arel::Table.new('selected').as(arel_table.name))
+        .join(arel_table).on(selected[:id].eq(arel_table[:parent_id]))
-        .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

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

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

@@ -8,7 +8,7 @@
     class: 'tools-area' %>
 </div>
 
-<table class="main-area items">
+<table class="main-area items-table">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>

app/views/measurements/_form.html.erb

@@ -1,28 +1,37 @@
 <%= tabular_form_with model: Measurement.new, id: :measurement_form,
-  class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
+  class: 'topside-area vflex centered',
-  <table class="items centered">
+  html: {onkeydown: 'formProcessKey(event)'} do |form| %>
-    <tbody id="readouts"></tbody>
+
+  <table class="items-table centered">
+    <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="number">
+            <%= form.datetime_field :taken_at, required: true %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
   </table>
 
-  <div class="hflex">
+  <%# TODO: right-click selection; unnecessary with hierarchical tags? %>
-    <%# TODO: right-click selection %>
+  <details id="quantity_select" class="centered hexpand" open
-    <details id="quantity_select" class="hexpand" open
+           onkeydown="detailsProcessKey(event)">
-             onkeydown="detailsProcessKey(event)">
+    <summary autofocus>
-      <summary autofocus>
+      <!-- TODO: Set content with CSS when span empty to avoid duplication -->
-        <!-- TODO: Set content with CSS when span empty to avoid duplication -->
+      <span data-prompt="<%= t('.select_quantity') %>">
-        <span data-prompt="<%= t('.select_quantity') %>">
+        <%= t('.select_quantity') %>
-          <%= t('.select_quantity') %>
+      </span>
-        </span>
+      <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
-        <%= image_button_tag t(:apply), "update", name: nil, disabled: true,
+        formaction: new_readout_path, formmethod: :get, formnovalidate: true,
-          formaction: new_readout_path, formmethod: :get, formnovalidate: true,
+        data: {turbo_stream: true} %>
-          data: {turbo_stream: true} %>
+    </summary>
-      </summary>
+    <ul><%= quantities_check_boxes(@quantities) %></ul>
-      <ul><%= quantities_check_boxes %></ul>
+  </details>
-    </details>
-    <%= form.button id: :create_measurement_button, disabled: true -%>
-  </div>
 
   <div class="hflex reverse">
+    <%= form.button id: :create_measurement_button, disabled: true -%>
     <%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
       class: 'dangerous', onclick: render_turbo_stream('form_close') %>
   </div>

app/views/quantities/index.html.erb

@@ -8,9 +8,10 @@
     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 class="main-area items-table">
   <thead>
     <tr>
       <th><%= Quantity.human_attribute_name(:name) %></th>

app/views/readouts/_form.html.erb

@@ -1,25 +1,24 @@
 <%# 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) %>
+    </td>
+    <td>
+      <%= form.number_field :value, required: true, 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: '', disabled: '', selected: ''}, required: true %>
+    </td>
     <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 %>

app/views/units/index.html.erb

@@ -7,9 +7,10 @@
     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 class="main-area items-table">
   <thead>
     <tr>
       <th><%= Unit.human_attribute_name(:symbol) %></th>

app/views/users/index.html.erb

@@ -1,4 +1,4 @@
-<table class="main-area items" id="users">
+<table class="main-area items-table" id="users">
   <thead>
     <tr>
       <th><%= User.human_attribute_name(:email) %></th>

app/views/users/profiles/new.html.erb

@@ -10,7 +10,6 @@
 
   <%= 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)} %>

config/locales/en.yml

@@ -85,12 +85,10 @@ en:
     navigation: Measurements
     no_items: There are no measurements taken. You can Add some now.
     form:
-      select_quantity: select the measured quantities...
+      select_quantity: select quantities...
+      taken_at_html: Measurement taken at 
     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.

db/migrate/20250121230456_create_readouts.rb

@@ -1,10 +1,14 @@
 class CreateReadouts < ActiveRecord::Migration[7.2]
   def change
     create_table :readouts do |t|
-      t.references :user, null: false, foreign_key: true
+      # Reference :user through :quantity (:measurement may be NULL).
+      t.references :measurement, 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
-      t.decimal :value, null: false, precision: 30, scale: 15
+      # Move to Measurement?
       #t.references :collector, foreign_key: true
       #t.references :device, foreign_key: true
 

test/system/users_test.rb

@@ -229,7 +229,7 @@ class UsersTest < ApplicationSystemTestCase
       user = User.find_by_email!(first(:link).text)
       inject_button_to first('td:not(.link)'), "update status", user_path(user), method: :patch,
         params: {user: {status: User.statuses.keys.sample}}, data: {turbo: false}
-      click_on "update status"
+      execute_script("arguments[0].click()", find_button("update status"))
     end
     assert_title 'The change you wanted was rejected (422)'
   end