Преглед на файлове

Fix: filter dropdowns no longer cropped + close on mouse-leave

- Owners / Status / Columns dropdowns were being clipped by
  `overflow-hidden` on the task <section>, especially noticeable when
  the table held a single row (no body height to absorb the panel).
  Removed `overflow-hidden`; preserved the rounded-corner look by
  giving the toolbar `rounded-t-lg` and the table wrapper
  `rounded-b-lg` so the inner backgrounds still respect the section
  border-radius.
- The three filter dropdowns now close on `mouseleave` of their
  `data-*-root` element (the panel lives inside the root, so one
  handler covers both the trigger button and the panel).
  Outside-click and the existing trigger-toggle paths stay in place.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa преди 3 дни
родител
ревизия
9b72c41c35
променени са 2 файла, в които са добавени 19 реда и са изтрити 3 реда
  1. 16 0
      public/assets/js/sprint-planner.js
  2. 3 3
      views/sprints/_task_list.twig

+ 16 - 0
public/assets/js/sprint-planner.js

@@ -979,6 +979,22 @@
         }
     });
 
+    // Close dropdowns when the cursor leaves the trigger+panel root. The
+    // panel sits inside the root (`<div class="relative">`), so a single
+    // mouseleave on the root fires only when the cursor exits both the
+    // button and the dropdown.
+    [
+        ['[data-owner-filter-root]',  '[data-owner-filter-dropdown]'],
+        ['[data-status-filter-root]', '[data-status-filter-dropdown]'],
+        ['[data-columns-root]',       '[data-columns-dropdown]'],
+    ].forEach(function (pair) {
+        const r = qs(pair[0]);
+        if (!r) { return; }
+        r.addEventListener('mouseleave', function () {
+            setHidden(qs(pair[1]), true);
+        });
+    });
+
     // --- Reset filters ---------------------------------------------------
 
     function filtersActive() {

+ 3 - 3
views/sprints/_task_list.twig

@@ -4,10 +4,10 @@
 {% set TaskAssignment_STATUSES = constant('App\\Domain\\TaskAssignment::STATUSES') %}
 {% set STATUS_ZUGEWIESEN = constant('App\\Domain\\TaskAssignment::STATUS_ZUGEWIESEN') %}
 
-<section class="rounded-lg border bg-white overflow-hidden {% if isBeamer|default(false) %}m-2 {% endif %}dark:bg-slate-800 dark:border-slate-700"
+<section class="rounded-lg border bg-white {% if isBeamer|default(false) %}m-2 {% endif %}dark:bg-slate-800 dark:border-slate-700"
          data-task-section
          data-task-status-enabled="{{ taskStatusEnabled ? '1' : '0' }}">
-    <div class="px-4 py-3 border-b bg-slate-50 flex flex-wrap items-center gap-2 dark:bg-slate-700 dark:border-slate-700">
+    <div class="rounded-t-lg px-4 py-3 border-b bg-slate-50 flex flex-wrap items-center gap-2 dark:bg-slate-700 dark:border-slate-700">
         <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wider dark:text-slate-200">Tasks</h2>
 
         <div class="ml-auto flex flex-wrap items-center gap-2">
@@ -138,7 +138,7 @@
         </div>
     </div>
 
-    <div class="overflow-x-auto">
+    <div class="overflow-x-auto rounded-b-lg">
         <table class="min-w-full text-sm" data-task-table>
             <thead class="bg-slate-50 text-slate-600 text-xs uppercase tracking-wider dark:bg-slate-700 dark:text-slate-300">
                 <tr>