From 79d5fae97ccd29a57304759f1d001545b54af3ac Mon Sep 17 00:00:00 2001
From: NotiBot <notibot@nothaft.cloud>
Date: Tue, 3 Feb 2026 14:10:29 +0100
Subject: [PATCH] =?UTF-8?q?Label-Filter=20hinzuf=C3=BCgen=20und=20Responsi?=
 =?UTF-8?q?ve-Bug=20auf=20der=20Tasks-Seite=20beheben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Label-Filter-Dropdown auf der Tasks-Übersichtsseite hinzugefügt (Tag-Icon, zeigt alle Labels mit Farbpunkt)
- Responsive-Bug behoben: Breakpoint-Mismatch bei negativen Margins (sm:-mx-6 → md:-mx-6) verursachte horizontales Scrollen zwischen 640-768px
- overflow-x-hidden auf den Hauptcontainer gesetzt
- Alle Select-Trigger mit min-w-0, truncate und shrink-0 Icons versehen für bessere Responsivität
---
 client/src/components/TasksWithCalendar.tsx | 50 +++++++++++++++++----
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index a4e69fe..fb37f31 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -16,7 +16,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { Search, Filter, SortAsc, Calendar, ChevronLeft, ChevronRight, Edit, Timer, CheckCircle, Play, Clock, Trash2 } from 'lucide-react';
+import { Search, Filter, SortAsc, Calendar, ChevronLeft, ChevronRight, Edit, Timer, CheckCircle, Play, Clock, Trash2, Tag } from 'lucide-react';
 import { Task, Label } from '@shared/schema';
 import TaskCard from './TaskCard';
 import { useQuery } from '@tanstack/react-query';
@@ -43,6 +43,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortOption>('dueDate');
   const [filterBy, setFilterBy] = useState<FilterOption>('open');
+  const [filterByLabel, setFilterByLabel] = useState<string>('all');
   const [calendarStartDate, setCalendarStartDate] = useState(startOfToday());
   const [draggedTask, setDraggedTask] = useState<string | null>(null);
   const [hoveredDate, setHoveredDate] = useState<Date | null>(null);
@@ -96,6 +97,11 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
 
       if (!matchesSearch) return false;
 
+      // Label filter
+      if (filterByLabel !== 'all') {
+        if (task.labelId !== filterByLabel) return false;
+      }
+
       // Status filter
       switch (filterBy) {
         case 'overdue':
@@ -251,7 +257,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-6rem)] relative">
+    <div className="flex flex-col h-[calc(100vh-6rem)] relative overflow-x-hidden">
       {/* Header and Search Filters - Fixed at Top */}
       <div className="flex-none pb-3 mb-2 bg-background/95 backdrop-blur z-40 border-b">
         <div className="space-y-3">
@@ -283,9 +289,9 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
               setFilterBy(value);
               console.log('Filter changed to:', value);
             }}>
-              <SelectTrigger className="flex-1" data-testid="select-filter">
-                <div className="flex items-center gap-2">
-                  <Filter className="w-4 h-4" />
+              <SelectTrigger className="flex-1 min-w-0" data-testid="select-filter">
+                <div className="flex items-center gap-2 truncate">
+                  <Filter className="w-4 h-4 shrink-0" />
                   <SelectValue />
                 </div>
               </SelectTrigger>
@@ -301,13 +307,39 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
               </SelectContent>
             </Select>
 
+            <Select value={filterByLabel} onValueChange={(value: string) => {
+              setFilterByLabel(value);
+              console.log('Label filter changed to:', value);
+            }}>
+              <SelectTrigger className="flex-1 min-w-0" data-testid="select-label-filter">
+                <div className="flex items-center gap-2 truncate">
+                  <Tag className="w-4 h-4 shrink-0" />
+                  <SelectValue />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('taskList.filter.allLabels', 'Alle Labels')}</SelectItem>
+                {labels.map((label) => (
+                  <SelectItem key={label.id} value={label.id}>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-3 h-3 rounded-full shrink-0"
+                        style={{ backgroundColor: label.color }}
+                      />
+                      <span>{label.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
             <Select value={sortBy} onValueChange={(value: SortOption) => {
               setSortBy(value);
               console.log('Sort changed to:', value);
             }}>
-              <SelectTrigger className="flex-1" data-testid="select-sort">
-                <div className="flex items-center gap-2">
-                  <SortAsc className="w-4 h-4" />
+              <SelectTrigger className="flex-1 min-w-0" data-testid="select-sort">
+                <div className="flex items-center gap-2 truncate">
+                  <SortAsc className="w-4 h-4 shrink-0" />
                   <SelectValue />
                 </div>
               </SelectTrigger>
@@ -377,7 +409,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onT
       </div>
 
       {/* Calendar Section - Fixed at bottom */}
-      <div className="flex-none -mx-4 sm:-mx-6 bg-background/95 backdrop-blur z-30 border-t mt-auto shadow-up-lg">
+      <div className="flex-none -mx-4 md:-mx-6 bg-background/95 backdrop-blur z-30 border-t mt-auto shadow-up-lg">
         <div className="p-3">
           {/* Calendar Header */}
           <div className="flex items-center justify-between mb-3">