fix(tasks): full-size fields in the task details on phones

Task list, people search, hashtag and subtask fields were 24-32 px with
12 px text on phones; they now match the other fields (44 px, 16 px text,
no zoom on iOS). The note button says just "Notiz" there, so the header
stays on one line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 12:59:16 +01:00
1 parent 92993c2dd2
commit b04991ee23
3 files changed
+14 -10

No files matched your search

+3 -3
View File
@@ -103,7 +103,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
return (
<div ref={containerRef} className={`relative ${className}`}>
{selectedUser ? (
<div className="h-8 px-2.5 bg-panel-elevated border border-accent/40 rounded-btn flex items-center justify-between gap-2 text-xs">
<div className="h-11 sm:h-8 px-2.5 bg-panel-elevated border border-accent/40 rounded-btn flex items-center justify-between gap-2 text-xs">
<div className="flex items-center gap-2 min-w-0">
<UserAvatar user={selectedUser} size="xs" />
<span className="font-semibold text-main truncate">
@@ -148,7 +148,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
onFocus={() => setIsOpen(true)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
className="w-full h-8 pl-8 pr-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-xs placeholder:text-muted transition-colors disabled:opacity-50"
className="w-full h-11 sm:h-8 pl-8 pr-2.5 bg-input text-main border border-border rounded-btn focus:outline-none focus:border-accent text-base sm:text-xs placeholder:text-muted transition-colors disabled:opacity-50"
/>
{showResults && (
@@ -166,7 +166,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
type="button"
onClick={() => handleSelect(u)}
onMouseEnter={() => setHighlightedIndex(idx)}
className={`w-full px-2.5 py-1.5 flex items-center justify-between gap-2 text-left text-xs transition-colors cursor-pointer ${
className={`w-full min-h-11 sm:min-h-0 px-2.5 py-1.5 flex items-center justify-between gap-2 text-left text-xs transition-colors cursor-pointer ${
isHighlighted
? 'bg-accent/15 text-main font-medium'
: 'hover:bg-panel-elevated text-main'
@@ -287,7 +287,9 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
className="btn-primary min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5 font-semibold"
>
<FileText className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
<span>In Notiz öffnen</span>
{/* Short on phones, so the header buttons stay on one line */}
<span className="sm:hidden">Notiz</span>
<span className="hidden sm:inline">In Notiz öffnen</span>
</button>
) : !readOnly && (
<button
@@ -611,7 +613,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
<select
value={task.taskListId || ''}
onChange={(e) => onUpdateTaskList(task, e.target.value)}
className="w-full h-8 input-field px-2.5 text-xs bg-panel"
className="w-full h-11 sm:h-8 input-field px-2.5 text-base sm:text-xs bg-panel"
>
<option value="">-- Keine Liste (Allgemein) --</option>
{taskLists.map((tl) => (
@@ -714,7 +716,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
value={newTagDraft}
onChange={(e) => setNewTagDraft(e.target.value)}
placeholder="+ #hashtag"
className="h-6 w-24 px-1.5 text-xs input-field"
className="h-11 sm:h-6 w-32 sm:w-24 px-2 sm:px-1.5 text-base sm:text-xs input-field"
/>
</form>
)}
@@ -802,13 +804,13 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
type="text"
value={newSubtaskTitle}
onChange={(e) => setNewSubtaskTitle(e.target.value)}
placeholder="Neue Unteraufgabe hinzufügen…"
className="flex-1 h-7 px-2 text-xs input-field"
placeholder="Neue Unteraufgabe…"
className="flex-1 min-w-0 h-11 sm:h-7 px-2 text-base sm:text-xs input-field"
/>
<button
type="submit"
disabled={!newSubtaskTitle.trim()}
className="btn-action h-7 px-2.5 text-xs disabled:opacity-40"
className="btn-action h-11 sm:h-7 px-2.5 text-xs disabled:opacity-40"
>
<Plus className="w-3 h-3" />
<span>Hinzufügen</span>