fix(ui): Dialoge weichen der Bildschirmtastatur aus

Auf dem Telefon verdeckte die Tastatur den halben Dialog – bei der
Schnellerfassung genau das Eingabefeld, um das es geht.

Ursache ist der Unterschied zwischen Layout- und Sichtfenster: die Tastatur
schiebt sich darueber, ohne dass sich fuer die Seite etwas aendert.
"position: fixed" und "100vh" beziehen sich weiter auf das volle Fenster,
ein mittig stehender Dialog liegt damit zur Haelfte darunter.

Der Dialog richtet sich jetzt nach window.visualViewport – Hoehe und oberer
Rand kommen von dort und werden bei jeder Aenderung nachgefuehrt. Weil der
Behaelter scrollbar ist, holt der Browser das fokussierte Feld dann von
selbst ins Bild. Das gilt fuer alle Dialoge, nicht nur die Schnellerfassung.

Dazu, weil es beim Nachsehen auffiel: Aufgaben lassen sich in der
Uebersicht direkt bearbeiten. Bisher fuehrte von dort nur der Weg ins
Projekt, und wer eine Faelligkeit aendern wollte, musste die Aufgabe im
Brett wiederfinden. Der Dialog nimmt dafuer eine schlankere Form entgegen
als den vollstaendigen Prisma-Datensatz.

Geprueft mit einem nachgestellten Sichtfenster: Eingabefeld und Absende-
knopf liegen bei 375x667 und aufgeklappter Tastatur vollstaendig im freien
Bereich. Vorher lagen beide darunter.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-15 00:34:56 +02:00
co-authored by Claude Opus 5
parent c9202fb65e
commit 6a7365946b
6 changed files with 223 additions and 10 deletions
+28 -3
View File
@@ -14,6 +14,7 @@ import {
} from "lucide-react";
import type { TaskStatus } from "@prisma/client";
import { QuickCapture } from "@/components/QuickCapture";
import { TaskDialog } from "@/components/tasks/TaskDialog";
import {
DUE_BUCKET_META,
DUE_BUCKET_ORDER,
@@ -44,6 +45,8 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
const [zeigeErledigte, setZeigeErledigte] = useState(false);
const [erfassenOffen, setErfassenOffen] = useState(false);
const [laufend, setLaufend] = useState<Set<string>>(new Set());
/** Welche Aufgabe gerade im Dialog liegt. null heisst: keiner offen. */
const [bearbeiten, setBearbeiten] = useState<TaskOverviewItem | null>(null);
const projekte = useMemo(() => {
const map = new Map<string, string>();
@@ -253,6 +256,7 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
task={task}
busy={laufend.has(task.id)}
onToggle={() => abhaken(task)}
onEdit={() => setBearbeiten(task)}
/>
))}
</ul>
@@ -267,6 +271,18 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
onClose={() => setErfassenOffen(false)}
initialMode="aufgabe"
/>
{/* Derselbe Dialog wie im Projektbrett – er kennt seine Aufgabe ueber
die ID und braucht das Projekt nur zum Anlegen. */}
{bearbeiten ? (
<TaskDialog
open
projectId={bearbeiten.project.id}
task={bearbeiten}
initialStatus={bearbeiten.status}
onClose={() => setBearbeiten(null)}
/>
) : null}
</div>
);
}
@@ -275,10 +291,12 @@ function TaskRow({
task,
busy,
onToggle,
onEdit,
}: {
task: TaskOverviewItem;
busy: boolean;
onToggle: () => void;
onEdit: () => void;
}) {
const meta = TASK_STATUS_META[task.status];
const erledigt = task.status === "DONE";
@@ -303,14 +321,21 @@ function TaskRow({
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5">
<span
{/* Der Titel oeffnet den Bearbeiten-Dialog. Frueher fuehrte von
hier nur der Weg ins Projekt – wer eine Faelligkeit aendern
wollte, musste erst dorthin springen und die Aufgabe im Brett
wiederfinden. */}
<button
type="button"
onClick={onEdit}
className={cn(
"truncate text-sm",
"truncate text-left text-sm transition-colors hover:text-violet-200",
erledigt ? "text-slate-500 line-through" : "text-slate-100",
)}
title="Aufgabe bearbeiten"
>
{task.title}
</span>
</button>
{task.recurrence ? (
<Repeat
className="h-3 w-3 shrink-0 text-slate-500"