From 0ead0018119e89125c59e4737dc24116e612e317 Mon Sep 17 00:00:00 2001
From: m <paragraphenreiter@gmail.com>
Date: Mon, 4 May 2026 17:08:34 +0200
Subject: [PATCH] fix(dashboard,events): drop "Termine auf einen Blick" rail +
 fix multi-panel overflow leak
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

m's call (2026-05-04): the Dashboard's secondary "Termine auf einen
Blick" rail (3 cards) was redundant — the upcoming-Termine list lives
right below it on the same page, and the Fristen rail above is what
matters for the at-a-glance read. Drop the cards.

frontend/src/dashboard.tsx: remove the <section
aria-labelledby="dashboard-appointment-summary-heading"> and its 3 cards.

frontend/src/client/dashboard.ts: drop renderAppointmentSummary +
the AppointmentSummary type + the appointment_summary field on
DashboardData (kept the API-side payload — other consumers may use it
later; just stop wiring the dashboard to it).

Also two related event-page styling bugs:

- frontend/src/client/events.ts:721 was force-stamping
  `style.display = "block"` on the event-type multi-panel popup whenever
  the type filter was anything but appointment. The panel is supposed
  to be a hidden flyout owned by the trigger button via `panel.hidden`;
  the inline display:block trumped the `.multi-panel[hidden]` CSS rule
  and left it visible on larger screens (m flagged the
  `<div ... hidden="" style="display: block;">` artefact). Fix: never
  set inline display from this code path; force-close the panel only
  when switching to appointment view.

- frontend/src/styles/global.css `.multi-list` + `.multi-option`: long
  event-type labels overflowed the 22rem panel horizontally because
  `.multi-list` only had `overflow-y: auto` and the flex options had no
  `min-width: 0` / overflow-wrap rules. Add `overflow-x: hidden` +
  `min-width: 0` on the list and `overflow-wrap: anywhere` on options.
---
 frontend/src/client/dashboard.ts | 14 --------------
 frontend/src/client/events.ts    | 10 +++++++++-
 frontend/src/dashboard.tsx       | 21 ---------------------
 frontend/src/styles/global.css   |  4 ++++
 4 files changed, 13 insertions(+), 36 deletions(-)

diff --git a/frontend/src/client/dashboard.ts b/frontend/src/client/dashboard.ts
index b7fb4ec..3e58a5f 100644
--- a/frontend/src/client/dashboard.ts
+++ b/frontend/src/client/dashboard.ts
@@ -17,12 +17,6 @@ interface DeadlineSummary {
   later: number;
 }
 
-interface AppointmentSummary {
-  today: number;
-  this_week: number;
-  later: number;
-}
-
 interface MatterSummary {
   active: number;
   archived: number;
@@ -66,7 +60,6 @@ interface ActivityEntry {
 interface DashboardData {
   user: DashboardUser | null;
   deadline_summary: DeadlineSummary;
-  appointment_summary: AppointmentSummary;
   matter_summary: MatterSummary;
   upcoming_deadlines: UpcomingDeadline[];
   upcoming_appointments: UpcomingAppointment[];
@@ -105,7 +98,6 @@ function render(): void {
   if (!data) return;
   renderGreeting(data.user);
   renderSummary(data.deadline_summary);
-  renderAppointmentSummary(data.appointment_summary);
   renderMatters(data.matter_summary);
   renderDeadlines(data.upcoming_deadlines);
   renderAppointments(data.upcoming_appointments);
@@ -152,12 +144,6 @@ function renderSummary(s: DeadlineSummary): void {
   overdueCard.classList.toggle("dashboard-card-alarm", s.overdue > 0);
 }
 
-function renderAppointmentSummary(s: AppointmentSummary): void {
-  setCount("dashboard-count-appt-today", s.today);
-  setCount("dashboard-count-appt-this-week", s.this_week);
-  setCount("dashboard-count-appt-later", s.later);
-}
-
 function renderMatters(s: MatterSummary): void {
   setCount("dashboard-matter-active", s.active);
   setCount("dashboard-matter-archived", s.archived);
diff --git a/frontend/src/client/events.ts b/frontend/src/client/events.ts
index 608f086..35d98f5 100644
--- a/frontend/src/client/events.ts
+++ b/frontend/src/client/events.ts
@@ -718,7 +718,15 @@ function applyTypeVisibility() {
   toggleFilterPair("events-filter-status", !isAppointment);
   // Event-type multi-select also deadline-only (appointments have no event_types).
   toggleFilterPair("events-filter-event-type", !isAppointment, "events-filter-event-type-label");
-  toggleDisplay("events-filter-event-type-panel", !isAppointment, "block");
+  // The panel is a popup the trigger owns via `panel.hidden`. Never stamp
+  // `display: block` on it from the type filter — that overrides the
+  // `.multi-panel[hidden]` CSS rule and leaves the panel visible on larger
+  // screens. When switching to appointment view, force-close it.
+  const eventTypePanel = document.getElementById("events-filter-event-type-panel") as HTMLElement | null;
+  if (eventTypePanel) {
+    eventTypePanel.style.display = "";
+    if (isAppointment) eventTypePanel.hidden = true;
+  }
   // Termin-Typ is appointment-only.
   toggleFilterPair("events-filter-appointment-type", !isDeadline);
 
diff --git a/frontend/src/dashboard.tsx b/frontend/src/dashboard.tsx
index 5ebd8c1..cf9591d 100644
--- a/frontend/src/dashboard.tsx
+++ b/frontend/src/dashboard.tsx
@@ -86,27 +86,6 @@ export function renderDashboard(): string {
                 </div>
               </section>
 
-              {/* Termine summary rail — 3 cards: Heute · Diese Woche · Später (t-paliad-110) */}
-              <section className="dashboard-summary" aria-labelledby="dashboard-appointment-summary-heading">
-                <h2 id="dashboard-appointment-summary-heading" className="dashboard-section-heading" data-i18n="dashboard.appointment_summary.heading">
-                  Termine auf einen Blick
-                </h2>
-                <div className="dashboard-summary-grid">
-                  <a href="/appointments?status=today" className="dashboard-card dashboard-card-appt-today" id="dashboard-card-appt-today">
-                    <div className="dashboard-card-count" id="dashboard-count-appt-today">0</div>
-                    <div className="dashboard-card-label" data-i18n="dashboard.summary.today">Heute</div>
-                  </a>
-                  <a href="/appointments?status=this_week" className="dashboard-card dashboard-card-appt-week" id="dashboard-card-appt-thisweek">
-                    <div className="dashboard-card-count" id="dashboard-count-appt-this-week">0</div>
-                    <div className="dashboard-card-label" data-i18n="dashboard.summary.this_week">Diese Woche</div>
-                  </a>
-                  <a href="/appointments?status=later" className="dashboard-card dashboard-card-appt-later" id="dashboard-card-appt-later">
-                    <div className="dashboard-card-count" id="dashboard-count-appt-later">0</div>
-                    <div className="dashboard-card-label" data-i18n="dashboard.summary.later">Sp&auml;ter</div>
-                  </a>
-                </div>
-              </section>
-
               {/* Matter summary card */}
               <section className="dashboard-matters">
                 <a href="/projects" className="dashboard-matter-card">
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 08d8a1c..9807287 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -8622,8 +8622,10 @@ dialog.quick-add-sheet::backdrop {
 }
 .multi-list {
     overflow-y: auto;
+    overflow-x: hidden;
     flex: 1;
     min-height: 4rem;
+    min-width: 0;
 }
 .multi-group { padding: 0.25rem 0; }
 .multi-group-label {
@@ -8642,6 +8644,8 @@ dialog.quick-add-sheet::backdrop {
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
 }
 .multi-option:hover { background: var(--color-bg-lime-tint); }
 .multi-option input[type="checkbox"] { margin: 0; }