From 0e9ce26a1af8483c44728e13cb02014dcbed6383 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 5 Oct 2026 11:28:25 +0200
Subject: [PATCH] fix: mobile drawer width, group dividers and sidebar form
 layout

- Drawer uses the M3 width (up to 360px) so the appearance picker fits;
  segmented buttons get equal widths and swatches no longer shrink.
- Dividers separate the drawer groups, so section headings no longer
  read as nav items.
- Sidebar forms in the drawer (e.g. activity filters) line up with the
  nav labels, fields stack under their label, checkbox rows align.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tonalmine/stylesheets/components.css |  8 ++++----
 tonalmine/stylesheets/mobile.css     | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/tonalmine/stylesheets/components.css b/tonalmine/stylesheets/components.css
index dba3648..b0c2b3d 100644
--- a/tonalmine/stylesheets/components.css
+++ b/tonalmine/stylesheets/components.css
@@ -501,12 +501,11 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
   letter-spacing: var(--md-sys-typescale-label-medium-tracking);
 }
 /* M3 segmented button */
-.nm-segmented { display: flex; margin-block-end: 12px; }
+.nm-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-block-end: 12px; } /* equal segments */
 .nm-segmented button {
-  flex: 1;
   border-radius: 0;
   block-size: 32px;
-  padding-inline: 12px;
+  padding-inline: 8px;
   border: 1px solid var(--md-sys-color-outline);
   background: transparent;
   color: var(--md-sys-color-on-surface);
@@ -519,8 +518,9 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
 .nm-segmented button:hover { background-image: var(--nm-state-hover); }
 .nm-segmented button[aria-pressed="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
 /* Color swatches: the selected one gets a ring */
-.nm-swatches { display: flex; gap: 8px; }
+.nm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
 .nm-swatch {
+  flex-shrink: 0;
   inline-size: 28px;
   block-size: 28px;
   padding: 0;
diff --git a/tonalmine/stylesheets/mobile.css b/tonalmine/stylesheets/mobile.css
index 54fafee..896b37f 100644
--- a/tonalmine/stylesheets/mobile.css
+++ b/tonalmine/stylesheets/mobile.css
@@ -51,8 +51,11 @@
      which core's responsive.js already binds to close the flyout. */
   html.flyout-is-active :is(#wrapper, #header) { inset-inline-end: 0; }
   html .flyout-menu {
+    --nm-drawer-width: min(360px, calc(100vw - 56px)); /* M3 modal drawer; core's 250px squeezes the appearance picker */
     position: fixed;
     inset-block: 0;
+    inset-inline-end: calc(-1 * var(--nm-drawer-width));
+    inline-size: var(--nm-drawer-width);
     z-index: 10001; /* over core's fixed header (9999) and the scrim */
     block-size: auto;
     overflow-y: auto;
@@ -86,6 +89,26 @@
     letter-spacing: var(--md-sys-typescale-title-small-tracking);
     text-transform: none;
   }
+  /* M3 drawer dividers between groups; headings alone look like one more nav item */
+  html .flyout-menu > :is(h3, .flyout-menu__sidebar:has(#sidebar-wrapper > *), .nm-appearance) {
+    display: block; /* the sidebar group is a span */
+    margin-block-start: 8px;
+    padding-block-start: 8px;
+    border-block-start: 1px solid var(--md-sys-color-outline-variant);
+  }
+  html .flyout-menu > h3 { padding-block-start: 16px; }
+  /* Sidebar forms (e.g. activity filters) line up with the nav labels; a field stacks under
+     its label, which is a bare text node, so grid is the only way to put it on its own row */
+  html .flyout-menu__sidebar :is(form > p, li:has(> input[type="checkbox"])) { padding-inline: 16px; }
+  html .flyout-menu__sidebar p:has(> :is(select, input:not([type="submit"], [type="checkbox"], [type="radio"]))) {
+    display: grid;
+    gap: 4px;
+    color: var(--md-sys-color-on-surface-variant);
+    font: var(--md-sys-typescale-label-large);
+  }
+  html .flyout-menu__sidebar p > :is(select, input:not([type="submit"], [type="checkbox"], [type="radio"])) { inline-size: 100%; box-sizing: border-box; }
+  html .flyout-menu__sidebar li:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 12px; min-block-size: 40px; border: 0; }
+  html .flyout-menu .flyout-menu__sidebar li:has(> input[type="checkbox"]) a { block-size: auto; padding: 0; line-height: inherit; }
   html .flyout-menu h4 { color: var(--md-sys-color-on-surface); }
   html .flyout-menu a { color: var(--md-sys-color-on-surface-variant); }
   html .flyout-menu ul li a, html .flyout-menu ul li:first-child a {