fix: mobile layout, task clicks, list tab corners, hashtags in URLs

Mobile
- Plus button in triage did nothing: the stored action returned the
  capture function instead of calling it
- Workspace: tabs share the full width; save status sits as an icon next
  to the note title instead of wrapping into its own row; "Neue Notiz" /
  "Neuer Ordner" only in the top menu (and +), not repeated in the list
- Outliner fields measured while hidden stayed one line high (cut-off
  callout); they are measured again when their width changes
- Task dialog: scrolls in a div instead of a fieldset, height in dvh,
  notes editor grows with its text, so long notes are fully reachable

Desktop
- Delete button of the selected task/shopping list sits inside the tab as
  its own rounded button (matches rounded themes like Soft)

Both
- Tasks sometimes did not open: every reload after an action replaced the
  list with a loading placeholder, swallowing clicks; reloads are now
  silent after the first load of a list, stale responses are dropped
- Hashtags need whitespace or "(" before "#", so URL anchors are no
  longer tags (server, browser); one-time cleanup of stored anchor tags

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

frontend/src/App.tsx

@@ -226,7 +226,7 @@ export const App: React.FC = () => {
   useEffect(() => {
     closeMenu();
     if (activeTab === 'triage') {
-      setPrimaryAction(() => openMobileTriageCapture);
+      setPrimaryAction(openMobileTriageCapture);
       setGroups([
         {
           id: 'triage-actions',

frontend/src/features/lists/SharedListsView.tsx

@@ -825,14 +825,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             const openCount = deduplicateItems(lst.items || []).filter((i) => !i.isCompleted).length;
             const isSelected = activeList?.id === lst.id;
             return (
-              <div key={lst.id} className="relative group flex items-center">
+              <div
+                key={lst.id}
+                className={`relative group h-8 flex items-center border rounded-btn transition-colors ${
+                  isSelected ? 'bg-panel border-accent text-main' : 'bg-canvas border-border text-muted hover:text-main'
+                } ${isSelected && lists.length > 1 ? 'pr-1' : ''}`}
+              >
                 <button
                   onClick={() => setActiveListId(lst.id)}
-                  className={`h-8 px-3 text-xs font-medium border flex items-center gap-1.5 transition-colors ${
-                    isSelected
-                      ? 'bg-panel border-accent text-main'
-                      : 'bg-canvas border-border text-muted hover:text-main'
-                  } ${isSelected && lists.length > 1 ? 'rounded-l-btn rounded-r-none border-r-0' : 'rounded-btn'}`}
+                  className="h-full px-3 text-xs font-medium flex items-center gap-1.5 rounded-btn"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
@@ -844,7 +845,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   <button
                     onClick={() => handleDeleteList(lst.id)}
                     title="Liste löschen"
-                    className="h-8 px-2 bg-panel border-y border-r border-accent text-faint hover:text-status-err hover:bg-status-err/10 rounded-r-btn flex items-center justify-center transition-colors cursor-pointer"
+                    className="h-6 w-6 text-faint hover:text-status-err hover:bg-status-err/10 rounded-btn flex items-center justify-center transition-colors cursor-pointer"
                   >
                     <X className="w-3 h-3" />
                   </button>

frontend/src/features/triage/TaskDetailModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   X,
   Check,
@@ -71,6 +71,12 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
 
   const [isEditingNotes, setIsEditingNotes] = useState(false);
   const [notesDraft, setNotesDraft] = useState(task.notes || '');
+  // The notes field grows with its text, so long notes scroll with the dialog instead of inside a small box
+  const growNotes = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight + 2}px`;
+  }, []);
 
   const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
   const [newTagDraft, setNewTagDraft] = useState('');
@@ -172,7 +178,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
   return (
     <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
       <div
-        className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden"
+        className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] max-h-[92dvh] overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Top Header */}
@@ -272,7 +278,9 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
         </div>
 
         {/* Scrollable Body (all controls disabled for read-only shares) */}
-        <fieldset disabled={readOnly} className="p-4 overflow-y-auto space-y-4 flex-1 min-w-0 border-0 m-0">
+        {/* The scroll container is a div: a scrolling <fieldset> is unreliable in mobile browsers */}
+        <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch]">
+        <fieldset disabled={readOnly} className="p-4 space-y-4 min-w-0 border-0 m-0">
           {/* Task Title */}
           <div>
             {isEditingTitle ? (
@@ -672,7 +680,9 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
                   placeholder="Detailnotizen eingeben… (Markdown unterstützt)"
                   rows={6}
                   autoFocus
-                  className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-y min-h-[100px]"
+                  ref={growNotes}
+                  onInput={(e) => growNotes(e.currentTarget)}
+                  className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-none min-h-[100px] overflow-hidden"
                 />
                 <div className="flex justify-end gap-1.5">
                   <button
@@ -725,6 +735,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
             )}
           </div>
         </fieldset>
+        </div>
 
         {/* Modal Footer */}
         <div className="flex items-center justify-between px-4 py-2.5 border-t border-border bg-panel">

frontend/src/features/triage/TasksView.tsx

@@ -134,16 +134,25 @@ export const TasksView: React.FC<TasksViewProps> = ({
   const [groupBy, setGroupBy] = useState<'none' | 'tag' | 'status' | 'priority' | 'due'>('none');
   const [sortBy, setSortBy] = useState<'custom' | 'created' | 'due' | 'priority' | 'alpha'>('custom');
 
+  // Reloads happen after almost every action and on realtime events. Only the first load of a list shows
+  // the loading placeholder: replacing the rendered list on every reload swallowed clicks and taps that
+  // happened to fall into the reload (press and release then hit different elements).
+  const loadedListRef = useRef<string | null>(null);
+  const loadSeqRef = useRef(0);
   const loadData = async () => {
-    setLoading(true);
+    const seq = ++loadSeqRef.current;
+    const listId = selectedListId;
+    if (loadedListRef.current !== listId) setLoading(true);
     try {
       const [allTasks, allLists, allTeams, allCollabs, allDiscarded] = await Promise.all([
-        api.getTasks(selectedListId === 'all' ? undefined : selectedListId).catch(() => []),
+        api.getTasks(listId === 'all' ? undefined : listId).catch(() => []),
         api.getTaskLists().catch(() => []),
         api.getUserTeams().catch(() => []),
         api.getCollaborators().catch(() => []),
         api.getThoughts('discarded').catch(() => []),
       ]);
+      if (seq !== loadSeqRef.current) return; // a newer reload is under way
+      loadedListRef.current = listId;
       setTasks(Array.isArray(allTasks) ? allTasks : []);
       setTaskLists(Array.isArray(allLists) ? allLists : []);
       setTeams(Array.isArray(allTeams) ? allTeams : []);
@@ -152,7 +161,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
     } catch {
       // Prevent unhandled promise rejection from crashing view
     } finally {
-      setLoading(false);
+      if (seq === loadSeqRef.current) setLoading(false);
     }
   };
 
@@ -1333,14 +1342,15 @@ export const TasksView: React.FC<TasksViewProps> = ({
           </button>
 
           {safeTaskLists.map((tl) => (
-            <div key={tl.id} className="relative group flex items-center">
+            <div
+              key={tl.id}
+              className={`relative group h-8 flex items-center border rounded-btn transition-colors ${
+                selectedListId === tl.id ? 'bg-panel border-accent text-main pr-1' : 'bg-canvas border-border text-muted hover:text-main'
+              }`}
+            >
               <button
                 onClick={() => setSelectedListId(tl.id)}
-                className={`h-8 px-3 text-xs font-medium border flex items-center gap-1.5 transition-colors ${
-                  selectedListId === tl.id
-                    ? 'bg-panel border-accent text-main rounded-l-btn rounded-r-none border-r-0'
-                    : 'bg-canvas border-border text-muted hover:text-main rounded-btn'
-                }`}
+                className="h-full px-3 text-xs font-medium flex items-center gap-1.5 rounded-btn"
               >
                 <span>{tl.icon}</span>
                 <span>{tl.title}</span>
@@ -1377,7 +1387,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 <button
                   onClick={() => handleDeleteTaskList(tl.id)}
                   title="Liste löschen"
-                  className="h-8 px-2 bg-panel border-y border-r border-accent text-faint hover:text-status-err hover:bg-status-err/10 rounded-r-btn flex items-center justify-center transition-colors cursor-pointer"
+                  className="h-6 w-6 text-faint hover:text-status-err hover:bg-status-err/10 rounded-btn flex items-center justify-center transition-colors cursor-pointer"
                 >
                   <X className="w-3 h-3" />
                 </button>

frontend/src/features/workspace/DocumentEditor.tsx

@@ -14,11 +14,15 @@ import {
   Sparkles,
   Plus,
   Search,
+  Check,
+  CloudOff,
+  AlertTriangle,
 } from 'lucide-react';
 import { Document, DocumentBlock, User } from '../../lib/types';
 import { api } from '../../lib/api';
 import { DocSyncEngine, EngineState } from '../../lib/docSync/engine';
 import { OutlinerTree, OutlinerTreeHandle } from './OutlinerTree';
+import { extractHashtags } from '../../lib/hashtags';
 
 export type DocSaveStatus = 'saved' | 'saving' | 'unsaved' | 'error';
 
@@ -314,12 +318,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   const extractedTags = useMemo(() => {
     const tagSet = new Set<string>();
     for (const b of blocks) {
-      const matches = b.content?.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g);
-      if (matches) {
-        for (const m of matches) {
-          tagSet.add(m.slice(1).toLowerCase());
-        }
-      }
+      for (const tag of extractHashtags(b.content)) tagSet.add(tag);
     }
     return Array.from(tagSet);
   }, [blocks]);
@@ -755,6 +754,33 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
             </div>
           )}
 
+          {/* Save status on phones (the desktop shows it above the workspace) */}
+          {engineState && (
+            <span
+              className="sm:hidden inline-flex items-center shrink-0"
+              title={
+                engineState.status === 'saving'
+                  ? 'Speichert…'
+                  : engineState.status === 'offline'
+                  ? 'Offline – Änderungen sind lokal gesichert'
+                  : engineState.status === 'error'
+                  ? engineState.errorMessage || 'Fehler beim Speichern'
+                  : 'Gespeichert'
+              }
+              aria-label="Speicherstatus"
+            >
+              {engineState.status === 'saving' ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin text-accent" />
+              ) : engineState.status === 'offline' ? (
+                <CloudOff className="w-3.5 h-3.5 text-status-warn" />
+              ) : engineState.status === 'error' ? (
+                <AlertTriangle className="w-3.5 h-3.5 text-status-err" />
+              ) : (
+                <Check className="w-3.5 h-3.5 text-status-ok" />
+              )}
+            </span>
+          )}
+
           {/* Read-only indicator */}
           {!canEdit && (
             <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-btn text-[11px] font-medium bg-status-warn/10 text-status-warn border border-status-warn/30">

frontend/src/features/workspace/OutlinerBlock.tsx

@@ -288,8 +288,25 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
 
   useEffect(() => {
     window.addEventListener('resize', adjustHeight);
-    return () => window.removeEventListener('resize', adjustHeight);
-  }, [adjustHeight]);
+    // The field can be measured while hidden (phone layout shows the editor only after selecting a note);
+    // measure again whenever its width changes
+    const el = textareaRef.current;
+    let lastWidth = el?.clientWidth ?? 0;
+    const observer =
+      el && typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => {
+            if (el.clientWidth !== lastWidth) {
+              lastWidth = el.clientWidth;
+              adjustHeight();
+            }
+          })
+        : null;
+    if (el) observer?.observe(el);
+    return () => {
+      window.removeEventListener('resize', adjustHeight);
+      observer?.disconnect();
+    };
+  }, [adjustHeight, block.type]);
 
   const filteredSlashCommands = useMemo(() => {
     if (slashSearch === null) return [];

frontend/src/features/workspace/WorkspaceView.tsx

@@ -52,6 +52,7 @@ import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { sendDocOps } from '../../lib/docSync/oneoff';
 import { useMobileActions } from '../../context/MobileActionContext';
 import { DocumentEditor, DocSaveStatus } from './DocumentEditor';
+import { extractHashtags } from '../../lib/hashtags';
 
 interface WorkspaceViewProps {
   currentUser?: User | null;
@@ -289,12 +290,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     const tagMap = new Map<string, number>();
     for (const d of docs) {
       for (const b of d.blocks || []) {
-        const matches = b.content?.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g);
-        if (matches) {
-          for (const m of matches) {
-            const clean = m.slice(1).toLowerCase();
-            tagMap.set(clean, (tagMap.get(clean) || 0) + 1);
-          }
+        for (const clean of extractHashtags(b.content)) {
+          tagMap.set(clean, (tagMap.get(clean) || 0) + 1);
         }
       }
     }
@@ -1117,8 +1114,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     <div className="w-full space-y-3">
       {/* Top Header: Workspace Tabs & Actions */}
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
-        {/* Workspace selector tabs & left sidebar toggle */}
-        <div className="flex flex-wrap items-center gap-1">
+        {/* Workspace selector tabs & left sidebar toggle; on phones the three tabs share the full width */}
+        <div className="grid grid-cols-3 w-full gap-1 sm:flex sm:flex-wrap sm:items-center sm:w-auto">
           <button
             type="button"
             disabled={subView !== 'editor'}
@@ -1155,7 +1152,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           <button
             type="button"
             onClick={() => setSubView('editor')}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+            className={`h-8 px-2 sm:px-3 text-xs font-medium border rounded-btn transition-colors flex items-center justify-center gap-1.5 cursor-pointer min-w-0 ${
               subView === 'editor'
                 ? 'bg-panel border-accent text-main'
                 : 'bg-canvas border-border text-muted hover:text-main'
@@ -1172,7 +1169,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               setSubView('todos');
               setMobileShowDetail(true);
             }}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+            className={`h-8 px-2 sm:px-3 text-xs font-medium border rounded-btn transition-colors flex items-center justify-center gap-1.5 cursor-pointer min-w-0 ${
               subView === 'todos'
                 ? 'bg-panel border-accent text-main'
                 : 'bg-canvas border-border text-muted hover:text-main'
@@ -1189,7 +1186,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               setSubView('tags');
               setMobileShowDetail(true);
             }}
-            className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
+            className={`h-8 px-2 sm:px-3 text-xs font-medium border rounded-btn transition-colors flex items-center justify-center gap-1.5 cursor-pointer min-w-0 ${
               subView === 'tags' || subView === 'tag_detail'
                 ? 'bg-panel border-accent text-main'
                 : 'bg-canvas border-border text-muted hover:text-main'
@@ -1201,8 +1198,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           </button>
         </div>
 
-        {/* Right Header Section: Save Status & Live Collaboration Button */}
-        <div className="flex items-center gap-2">
+        {/* Right Header Section: Save Status (on phones it sits compactly in the note's own header) */}
+        <div className="hidden sm:flex items-center gap-2">
           {subView === 'editor' && selectedDocId ? (
             /* Save Status Pill */
             <div
@@ -1272,7 +1269,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <h2 className="text-xs font-bold text-main uppercase tracking-wider">
                 Notizen & Outliner
               </h2>
-              <div className="flex items-center gap-1">
+              {/* On phones these are in the menu at the top (and the + button), so not repeated here */}
+              <div className="hidden sm:flex items-center gap-1">
                 <button
                   type="button"
                   onClick={(e) => handleOpenNewFolder('', e)}

frontend/src/lib/__tests__/hashtags.test.ts

@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { extractHashtags } from '../hashtags';
+
+describe('extractHashtags', () => {
+  it('finds tags at the start, after spaces and after "("', () => {
+    expect(extractHashtags('#start mitten #zwei (#drei)')).toEqual(['start', 'zwei', 'drei']);
+  });
+
+  it('ignores URL anchors and words like C#', () => {
+    expect(extractHashtags('example.com/blog#ueberschrift')).toEqual([]);
+    expect(extractHashtags('https://x.de/#anker und #echt, C# nicht')).toEqual(['echt']);
+  });
+});

frontend/src/lib/api.ts

@@ -28,6 +28,7 @@ import {
   UserInvite,
   WSMessage,
 } from './types';
+import { extractHashtags } from './hashtags';
 
 const TOKEN_STORAGE_KEY = 'mindsift_jwt_token';
 const OFFLINE_QUEUE_KEY = 'mindsift_offline_capture_queue';
@@ -254,7 +255,7 @@ export const api = {
         id: `th_offline_${Date.now()}`,
         userId: 'offline',
         content,
-        tags: (content.match(/#([a-zA-Z0-9äöüÄÖÜß_-]+)/g) || []).map((t) => t.slice(1).toLowerCase()),
+        tags: Array.from(new Set(extractHashtags(content))),
         priority,
         source,
         status: 'inbox',

frontend/src/lib/hashtags.ts

@@ -0,0 +1,9 @@
+// A hashtag starts the text or follows whitespace or "(". Fragments in links (example.com/blog#ueberschrift)
+// and words like "C#" are not tags. Same rule as the server (domain.ExtractTags).
+const HASHTAG = /(?:^|[\s(])#([a-zA-Z0-9äöüÄÖÜß_-]+)/g;
+
+/** All hashtags in a text, lower case, in order of appearance (with duplicates). */
+export function extractHashtags(text: string | undefined | null): string[] {
+  if (!text) return [];
+  return Array.from(text.matchAll(HASHTAG), (m) => m[1].toLowerCase());
+}