mAi: #112 - fix Fristenrechner Akte-picker icon overlap

The Akte-picker (Step 1) wraps its magnifying-glass icon + input in a
flexbox row (`.fristen-step1-search-row`) with `gap: 0.5rem`, expecting
the icon to participate in the flex layout. But the shared
`.fristen-search-icon` rule (used by the B2 search input) sets
`position: absolute; left: 0.875rem;` — and the step1-scoped override
only tweaked color + flex-shrink without resetting `position`.

Result: the icon was absolutely-positioned out of the flex flow and
overlapped the input text (since `.fristen-akte-search` has no
padding-left). Resetting `position: static` for the step1 context lets
flexbox + gap handle the spacing naturally — same pattern as
`.fristen-row-search-panel-input-wrap`, which already works.

Audited other search inputs with leading magnifying-glass icons:

- `.glossar-search` (Glossary, Courts, Links, Team, AdminTeam,
  AdminEventTypes) — wrap `.glossar-search-wrap` is `position: relative`,
  input has `padding: 0.65rem 4.5rem 0.65rem 2.5rem`. Fine.
- `.projects-search-input` (/projects index) — wrap is
  `position: relative`, input has `padding: 0.5rem 0.75rem 0.5rem 2.4rem`.
  Fine.
- `.fristen-search-input` (Fristenrechner B2) — wrap `.fristen-search-row`
  is `position: relative`, input has
  `padding: 0.75rem 2.5rem 0.75rem 2.6rem`. Fine.
- `.fristen-row-search-panel-input` (Fristenrechner row-search panel) —
  pure flex layout with `gap`, icon non-positioned. Fine.
- `.sidebar-search-input` (global sidebar search) — pure flex layout.
  Fine.
- Other search inputs (`event-search-input`, `event-type-search`,
  `submissions-new-search`, submissions index) have no leading icon.
  N/A.

frontend/src/client/admin-rules-edit.ts

@@ -51,10 +51,7 @@ interface Rule {
 interface ProceedingType {
   id: number;
   code: string;
-  // `name` is the German display name on the wire; the Go `ProceedingType`
-  // model serialises `db:"name"` as JSON key `name`. Don't reach for
-  // `name_de` — that field does not exist in this payload (m/paliad#113).
-  name: string;
+  name_de: string;
   name_en: string;
 }
 
@@ -172,8 +169,7 @@ function fillProceedingSelect(selectId: string, list: ProceedingType[]) {
   for (const pt of list) {
     const opt = document.createElement("option");
     opt.value = String(pt.id);
-    const name = getLang() === "en" ? pt.name_en : pt.name;
-    opt.textContent = name ? `${pt.code} · ${name}` : pt.code;
+    opt.textContent = `${pt.code} · ${getLang() === "en" ? pt.name_en : pt.name_de}`;
     sel.appendChild(opt);
   }
 }

frontend/src/client/admin-rules-list.ts

@@ -29,11 +29,7 @@ interface Rule {
 interface ProceedingType {
   id: number;
   code: string;
-  // `name` is the German display name on the wire; the Go `ProceedingType`
-  // model serialises `db:"name"` as JSON key `name` (the schema treats DE
-  // as primary). EN lives in `name_en`. Don't reach for `name_de` — that
-  // field does not exist in this payload (cf. m/paliad#113).
-  name: string;
+  name_de: string;
   name_en: string;
   category: string;
 }
@@ -129,12 +125,7 @@ function proceedingLabel(id: number | null | undefined): string {
   if (id == null) return "—";
   const pt = proceedings.find((p) => p.id === id);
   if (!pt) return `#${id}`;
-  const name = getLang() === "en" ? pt.name_en : pt.name;
-  // Guard against a proceeding row that's missing the active-language
-  // name (or against a stale field-name mismatch slipping back in).
-  // Show the code on its own rather than "code · undefined" — that
-  // literal string is the smell that surfaced this bug (m/paliad#113).
-  if (!name) return pt.code;
+  const name = getLang() === "en" ? pt.name_en : pt.name_de;
   return `${pt.code} · ${name}`;
 }
 
@@ -162,8 +153,7 @@ async function loadProceedings(): Promise<void> {
   for (const pt of proceedings) {
     const opt = document.createElement("option");
     opt.value = String(pt.id);
-    const name = getLang() === "en" ? pt.name_en : pt.name;
-    opt.textContent = name ? `${pt.code} · ${name}` : pt.code;
+    opt.textContent = `${pt.code} · ${getLang() === "en" ? pt.name_en : pt.name_de}`;
     sel.appendChild(opt);
   }
 }

frontend/src/client/date-range-picker.ts

@@ -191,37 +191,25 @@ export function mountDateRangePicker(opts: MountOpts): PickerHandle {
   function renderPanel(): void {
     panel.replaceChildren();
 
-    // Three vertical columns: Past (closest→farthest top→bottom),
-    // NOW (Heute + Alles), Future (closest→farthest). The grid
-    // visualises time as space around NOW — each column's top is
-    // closest to the current moment, bottom is furthest away.
-    const grid = document.createElement("div");
-    grid.className = "date-range-grid";
+    // Three groups in a single row: past fan / ALLES centre / next fan.
+    const row = document.createElement("div");
+    row.className = "date-range-row";
 
-    // Past column: PAST_HORIZONS registry is outermost→innermost
-    // (past_all → past_1d); reverse for closeness-to-NOW ordering
-    // (past_1d at top, past_all at bottom).
-    const pastCol = renderColumn(
+    const pastGroup = renderFan(
+      PAST_HORIZONS.filter((h) => presets.includes(h)),
       "past",
-      t("date_range.fan.past.label"),
-      [...PAST_HORIZONS].reverse().filter((h) => presets.includes(h)),
     );
-    const nowCol = renderNowColumn();
-    // Future column: NEXT_HORIZONS registry is already in closeness
-    // order (next_1d → next_all). next_1d moves to the NOW column as
-    // "Heute" (semantically just-today, single-day window), so the
-    // future column skips it.
-    const futureCol = renderColumn(
-      "future",
-      t("date_range.fan.future.label"),
-      NEXT_HORIZONS.filter((h) => h !== "next_1d" && presets.includes(h)),
+    const centerGroup = renderCenter();
+    const nextGroup = renderFan(
+      NEXT_HORIZONS.filter((h) => presets.includes(h)),
+      "next",
     );
 
-    if (pastCol) grid.appendChild(pastCol);
-    if (nowCol) grid.appendChild(nowCol);
-    if (futureCol) grid.appendChild(futureCol);
+    if (pastGroup) row.appendChild(pastGroup);
+    if (centerGroup) row.appendChild(centerGroup);
+    if (nextGroup) row.appendChild(nextGroup);
 
-    panel.appendChild(grid);
+    panel.appendChild(row);
 
     // Custom-range section ("Anpassen"). Toggle button + collapsible
     // date-pair editor below.
@@ -230,57 +218,49 @@ export function mountDateRangePicker(opts: MountOpts): PickerHandle {
     }
   }
 
-  function renderColumn(
-    side: "past" | "future",
-    heading: string,
-    horizons: readonly TimeHorizon[],
-  ): HTMLElement | null {
+  function renderFan(horizons: readonly TimeHorizon[], side: "past" | "next"): HTMLElement | null {
     if (horizons.length === 0) return null;
-    const col = document.createElement("div");
-    col.className = `date-range-col date-range-col--${side}`;
-    col.setAttribute("role", "group");
-    col.setAttribute("aria-label", heading);
-
-    const head = document.createElement("div");
-    head.className = "date-range-col-heading";
-    head.textContent = heading;
-    col.appendChild(head);
-
+    const group = document.createElement("div");
+    group.className = `date-range-fan date-range-fan--${side}`;
+    group.setAttribute("role", "group");
+    group.setAttribute("aria-label", side === "past"
+      ? t("date_range.fan.past.label")
+      : t("date_range.fan.future.label"));
     for (const h of horizons) {
-      col.appendChild(makeChip(h));
+      group.appendChild(makeChip(h));
     }
-    return col;
+    return group;
   }
 
-  function renderNowColumn(): HTMLElement | null {
-    const showHeute = presets.includes("next_1d");
-    const showAlles = presets.includes("any");
-    if (!showHeute && !showAlles) return null;
+  function renderCenter(): HTMLElement | null {
+    if (!presets.includes("any")) return null;
+    const wrap = document.createElement("div");
+    wrap.className = "date-range-center";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "date-range-center-btn";
+    if (value.horizon === "any" || value.horizon === "all") {
+      btn.classList.add("date-range-center-btn--active");
+    }
+    btn.setAttribute("aria-pressed", String(value.horizon === "any" || value.horizon === "all"));
+    btn.dataset.testid = `${opts.surface}.date-range-chip.any`;
 
-    const col = document.createElement("div");
-    col.className = "date-range-col date-range-col--now";
-    col.setAttribute("role", "group");
-    col.setAttribute("aria-label", t("date_range.center.label"));
-
-    const glyph = document.createElement("div");
-    glyph.className = "date-range-col-heading date-range-col-heading--glyph";
+    const glyph = document.createElement("span");
+    glyph.className = "date-range-center-glyph";
     glyph.setAttribute("aria-hidden", "true");
     glyph.textContent = "⌖"; // ⌖ POSITION INDICATOR
-    col.appendChild(glyph);
+    const label = document.createElement("span");
+    label.className = "date-range-center-label";
+    label.textContent = t("date_range.center.label");
+    btn.appendChild(glyph);
+    btn.appendChild(label);
 
-    if (showHeute) col.appendChild(makeChip("next_1d"));
-    if (showAlles) {
-      const allesChip = makeChip("any");
-      // Legacy "all" horizon also lights up Alles for back-compat
-      // with saved Custom Views that store the bidirectional-unbounded
-      // value (Q26 — parser preserves it, picker surfaces it here).
-      if (value.horizon === "all") {
-        allesChip.classList.add("agenda-chip-active");
-        allesChip.setAttribute("aria-pressed", "true");
-      }
-      col.appendChild(allesChip);
-    }
-    return col;
+    btn.addEventListener("click", () => {
+      commit({ horizon: "any" }, /*closeAfter*/ true);
+    });
+
+    wrap.appendChild(btn);
+    return wrap;
   }
 
   function makeChip(h: TimeHorizon): HTMLButtonElement {

frontend/src/client/filter-bar/axes.ts

@@ -73,16 +73,13 @@ export function renderAxis(axis: AxisKey, ctx: AxisCtx, opts?: RenderAxisOpts):
 
 type TimeHorizonValue = NonNullable<BarState["time"]>["horizon"];
 
-// Default chip set when the surface doesn't override. Mirrors m's
-// 3-column picker spec (t-paliad-278): symmetric 7d/30d/90d/all fan
-// per side, plus Heute (next_1d) + Alles (any) in the centre column,
-// plus Anpassen. Surfaces with a tighter scope (project history is
-// past-only) keep overriding via `timePresets`.
+// Default chip set when the surface doesn't override. Matches the
+// forward-leaning bias of the legacy filter-bar default (the universal
+// substrate is more often used for "what's coming up" than "what just
+// happened") but now covers the full symmetric fan plus past_30d for
+// quick recent-history lookups.
 const DEFAULT_TIME_PRESETS: TimeHorizonValue[] = [
-  "past_7d", "past_30d", "past_90d", "past_all",
-  "next_1d", "any",
-  "next_7d", "next_30d", "next_90d", "next_all",
-  "custom",
+  "past_30d", "past_7d", "any", "next_7d", "next_30d", "next_90d", "custom",
 ];
 
 function renderTimeAxis(ctx: AxisCtx, presetOverride?: TimeHorizonValue[]): HTMLElement {

frontend/src/client/i18n.ts

@@ -3062,7 +3062,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // /admin/audit-log to the same component.
     "date_range.button.label": "Zeitraum",
     "date_range.button.label.custom_range": "Von {from} bis {to}",
-    "date_range.horizon.next_1d":  "Heute",
+    "date_range.horizon.next_1d":  "Morgen",
     "date_range.horizon.next_7d":  "Nächste 7 Tage",
     "date_range.horizon.next_14d": "Nächste 14 Tage",
     "date_range.horizon.next_30d": "Nächste 30 Tage",
@@ -6110,7 +6110,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // Date-range picker (t-paliad-248). See DE block above for details.
     "date_range.button.label": "Time range",
     "date_range.button.label.custom_range": "From {from} to {to}",
-    "date_range.horizon.next_1d":  "Today",
+    "date_range.horizon.next_1d":  "Tomorrow",
     "date_range.horizon.next_7d":  "Next 7 days",
     "date_range.horizon.next_14d": "Next 14 days",
     "date_range.horizon.next_30d": "Next 30 days",

frontend/src/styles/global.css

@@ -8429,6 +8429,7 @@ input.rule-mode-custom {
 }
 
 .fristen-step1-search-row .fristen-search-icon {
+    position: static;
     color: var(--color-muted, #666);
     flex-shrink: 0;
 }
@@ -17760,10 +17761,9 @@ dialog.quick-add-sheet::backdrop {
 }
 
 .date-range-panel {
-  /* Inherits .multi-panel positioning + border + shadow. Sized so the
-     3-column grid holds the widest chip text ("Ganze Vergangenheit")
-     without wrapping while staying within the viewport on tablets. */
-  width: 34rem;
+  /* Inherits .multi-panel positioning + border + shadow. Widen it so
+     the symmetric fan + the custom editor have room to breathe. */
+  width: 32rem;
   max-width: calc(100vw - 1rem);
   top: 100%;
   left: 0;
@@ -17771,54 +17771,88 @@ dialog.quick-add-sheet::backdrop {
   gap: 0.75rem;
 }
 
-.date-range-grid {
-  /* Past / NOW / Future as three equal vertical columns. Each column
-     is a top-aligned chip stack so closeness-to-NOW (closest at top,
-     farthest at bottom) reads spatially. */
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 0.75rem;
-  align-items: start;
-}
-
-.date-range-col {
+.date-range-row {
   display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  min-width: 0;
-}
-
-.date-range-col--now {
+  flex-wrap: wrap;
+  gap: 0.5rem;
   align-items: stretch;
 }
 
-.date-range-col-heading {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-text-muted, #71717a);
-  text-align: center;
-  padding-bottom: 0.15rem;
+.date-range-fan {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-content: flex-start;
+  flex: 1 1 12rem;
+  min-width: 0;
 }
 
-.date-range-col-heading--glyph {
-  font-size: 1.3rem;
+.date-range-fan--past {
+  /* Past fan: outermost chip (Ganze Vergangenheit) leftmost. */
+  justify-content: flex-end;
+}
+
+.date-range-fan--next {
+  /* Future fan: innermost chip (Morgen / next_1d) leftmost. */
+  justify-content: flex-start;
+}
+
+.date-range-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0 0.25rem;
+}
+
+.date-range-center-btn {
+  appearance: none;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.6rem;
+  min-width: 4.5rem;
+  padding: 0.55rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.date-range-center-btn:hover {
+  background: var(--color-overlay-subtle);
+  border-color: var(--color-accent-light);
+}
+.date-range-center-btn:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.date-range-center-btn--active {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-dark);
+}
+
+.date-range-center-glyph {
+  font-size: 1.4rem;
   line-height: 1;
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--color-text-muted, #71717a);
+}
+
+.date-range-center-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .date-range-chip {
-  /* .agenda-chip provides bg/border/radius/typography; in the
-     3-column stack each chip fills its column so the closeness-to-NOW
-     ordering reads as a single vertical column rather than a ragged
-     row. */
-  padding: 0.35rem 0.65rem;
+  /* .agenda-chip provides bg/border/radius/typography; this modifier
+     only tightens horizontal padding so more chips fit per row. */
+  padding: 0.3rem 0.65rem;
   font-size: 0.8rem;
-  width: 100%;
-  text-align: center;
 }
 
 .date-range-chip--custom {
@@ -17905,14 +17939,17 @@ dialog.quick-add-sheet::backdrop {
   color: var(--status-red-fg, #b91c1c);
 }
 
-/* Mobile: stack the 3 columns vertically (one column per row),
-   preserving the closeness-to-NOW sort within each column. */
+/* Mobile: stack past / centre / next vertically so each fan gets
+   the full popover width. */
 @media (max-width: 540px) {
   .date-range-panel {
     width: calc(100vw - 1rem);
   }
-  .date-range-grid {
-    grid-template-columns: 1fr;
-    gap: 0.5rem;
+  .date-range-row {
+    flex-direction: column;
+  }
+  .date-range-fan--past,
+  .date-range-fan--next {
+    justify-content: flex-start;
   }
 }