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

@@ -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; }

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.