From d687084cf08fd16f735ef4733b2e316fe6540316 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 5 Oct 2026 12:53:02 +0200
Subject: [PATCH] fix: full-width mobile query filters and tonal "Add filter"
 button

On mobile the filter operator and value fields span the row instead of
fixed desktop widths, and empty value rows are hidden. "Add filter"
becomes an M3 tonal button on all widths so it stands out from the
outlined filter fields.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tonalmine/stylesheets/mobile.css | 11 ++++++++++
 tonalmine/stylesheets/tables.css | 35 +++++++++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/tonalmine/stylesheets/mobile.css b/tonalmine/stylesheets/mobile.css
index 896b37f..bc9c745 100644
--- a/tonalmine/stylesheets/mobile.css
+++ b/tonalmine/stylesheets/mobile.css
@@ -179,6 +179,17 @@
   html form .attributes select:has(+ .icon-only) { inline-size: calc(100% - 36px); }
   html .tabular input[type="radio"] { inline-size: auto; }
 
+  /* Query filters: operator and values run full width under the checkbox label instead of
+     the desktop's fixed 180px / 260px columns. A flex-basis of 0 overrides those widths, so
+     "between" fields split the row and a multi-select toggle keeps its spot after the field. */
+  html #filters-table .filter { row-gap: 8px; margin-block-end: 8px; }
+  html #filters-table .filter :is(.operator, .values) { flex: 1 1 100%; }
+  html #filters-table .filter .values:not(:has(> span:not([style*="none"]))) { display: none; } /* e.g. status "open" */
+  html #filters-table .filter .operator select { inline-size: 100%; }
+  html #filters-table .filter .values > span { display: flex; flex: 1 1 0; align-items: center; gap: 8px; }
+  html #filters-table .filter .values .value:not([size="3"]) { flex: 1 1 0; min-inline-size: 0; }
+  html .add-filter { justify-content: stretch; margin-block-start: 16px; } /* full-width button */
+
   /* Wiki toolbar: buttons wrap instead of being cut off */
   html #content .jstTabs.tabs { clear: both; block-size: auto; overflow: visible; } /* below the floated field label */
   html #content .jstTabs.tabs ul { position: static; display: flex; flex-wrap: wrap; inline-size: auto; min-inline-size: 0; }
diff --git a/tonalmine/stylesheets/tables.css b/tonalmine/stylesheets/tables.css
index 4fc0455..66c9af3 100644
--- a/tonalmine/stylesheets/tables.css
+++ b/tonalmine/stylesheets/tables.css
@@ -149,7 +149,40 @@ a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: var(--md-sy
 #filters-table .filter .field { display: flex; align-items: center; gap: 8px; min-block-size: 40px; }
 #filters-table .filter .field input[type="checkbox"] { margin: 0; }
 #filters-table .filter .values { display: flex; align-items: center; min-block-size: 40px; flex-wrap: wrap; gap: 4px 8px; }
-.add-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+/* "Add filter" is an M3 tonal button, not one more outlined field. A select has no
+   placeholder, so the label lies over it in the same grid cell and lets taps through.
+   A zero width with a 100% minimum keeps the longest option from widening the button. */
+.add-filter { display: grid; justify-content: end; margin-block-start: 4px; }
+.add-filter > * { grid-area: 1 / 1; }
+.add-filter select {
+  inline-size: 0;
+  min-inline-size: 100%;
+  block-size: 40px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-secondary-container); /* drops the dropdown arrow too */
+  cursor: pointer;
+}
+.add-filter select:hover { background-image: var(--nm-state-hover); }
+.add-filter label {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-inline: 16px 24px;
+  pointer-events: none;
+  color: var(--md-sys-color-on-secondary-container);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.add-filter label::before {
+  content: '';
+  inline-size: 18px;
+  block-size: 18px;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/%3E%3C/svg%3E") center / 18px no-repeat;
+}
 /* Core fixes the operator at 120px, too narrow for "has never been" with M3 field padding */
 #filters-table .filter .operator select { inline-size: 180px; }
 /* All value fields share one width so the filter rows form a clean second column.