style: folders without arrow, hashtag row cut off with an expander

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/triage/TasksView.tsx

@@ -203,6 +203,10 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   // Hashtag filtering, grouping and sorting state
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  // Hashtag row on desktop: whether it is cut off, and whether it is opened up into several lines
+  const tagRowRef = useRef<HTMLDivElement>(null);
+  const [tagsExpanded, setTagsExpanded] = useState(false);
+  const [tagsOverflow, setTagsOverflow] = useState(false);
   const [groupBy, setGroupBy] = useState<'none' | 'tag' | 'status' | 'priority' | 'due'>('none');
   const [sortBy, setSortBy] = useState<'custom' | 'created' | 'due' | 'priority' | 'alpha'>('custom');
 
@@ -491,6 +495,17 @@ export const TasksView: React.FC<TasksViewProps> = ({
     return Array.from(set).sort();
   }, [safeTasks]);
 
+  // Cut off? Measured while the row is one line (on resize and when the tags change)
+  useEffect(() => {
+    const el = tagRowRef.current;
+    if (!el || tagsExpanded) return;
+    const measure = () => setTagsOverflow(el.scrollWidth > el.clientWidth + 1);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [allAvailableTags, tagsExpanded, viewMode]);
+
   // Filtered tasks for List view
   const openTasks = safeTasks.filter((t) => !t.isCompleted);
   const doneTasks = safeTasks.filter((t) => t.isCompleted);
@@ -2055,8 +2070,11 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
       {/* Hashtag Filter & Grouping / Sorting Toolbar (Desktop only - on mobile accessible via Logo Menu Filter & Sort) */}
       <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 pt-1 pb-0.5">
-        {/* Hashtag filter chips */}
-        <div className="flex items-center gap-1.5 overflow-x-auto max-w-full pb-1">
+        {/* Hashtag filter chips: one line, cut off with "…" when too many; "…" opens them all in lines */}
+        <div
+          ref={tagRowRef}
+          className={`flex-1 min-w-0 flex items-center gap-1.5 pb-1 ${tagsExpanded ? 'flex-wrap' : 'overflow-hidden'}`}
+        >
           <span className="text-[11px] font-semibold text-muted flex items-center gap-1 flex-shrink-0">
             <Hash className="w-3 h-3 text-accent" />
             <span>Hashtags:</span>
@@ -2089,7 +2107,25 @@ export const TasksView: React.FC<TasksViewProps> = ({
               </button>
             );
           })}
+          {tagsExpanded && (
+            <button
+              onClick={() => setTagsExpanded(false)}
+              className="h-6 px-2 text-[11px] rounded-pill text-accent hover:underline flex-shrink-0"
+            >
+              Weniger
+            </button>
+          )}
         </div>
+        {!tagsExpanded && tagsOverflow && (
+          <button
+            onClick={() => setTagsExpanded(true)}
+            className="h-6 px-2 -ml-1 mb-1 text-xs rounded-pill border border-border bg-canvas text-muted hover:text-main flex-shrink-0"
+            title="Alle Hashtags zeigen"
+            aria-label="Alle Hashtags zeigen"
+          >
+            …
+          </button>
+        )}
 
         {/* Kanban: manage columns and width (the list view has grouping and sorting above the list) */}
         <div className="flex items-center gap-2 flex-shrink-0 ml-auto">