mobile task add better view handling and fixed dup templates

This commit is contained in:
2026-02-06 11:21:51 -06:00
parent 779feade9f
commit 6192a1dc32
2 changed files with 33 additions and 26 deletions
+24 -25
View File
@@ -262,32 +262,31 @@ export const QuickEntry: Component = () => {
<div class="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
<div class="relative w-full max-w-xl max-h-[100vh] md:max-h-[80vh] bg-card border border-border rounded-t-2xl md:rounded-2xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4 md:zoom-in-95 duration-200 flex flex-col">
<div class="flex items-center px-4 py-3 border-b border-border shrink-0">
<Search class="text-muted-foreground mr-3" size={20} />
<TextField class="flex-1">
<TextFieldInput
id="quick-entry-input"
name="task-title"
ref={inputRef}
value={input()}
onInput={(e) => setInput(e.currentTarget.value)}
onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
class="border-none shadow-none focus-visible:ring-0 text-lg"
/>
</TextField>
<Button
size="icon"
variant="ghost"
onClick={() => setIsOpen(false)}
class="ml-2 md:hidden h-9 w-9 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted"
>
<X size={20} />
</Button>
</div>
{/* Scrollable content area */}
{/* Scrollable content area - includes header so entire card can scroll on mobile */}
<div class="flex-1 overflow-y-auto overscroll-contain">
<div class="flex items-center px-4 py-3 border-b border-border sticky top-0 bg-card z-10">
<Search class="text-muted-foreground mr-3" size={20} />
<TextField class="flex-1">
<TextFieldInput
id="quick-entry-input"
name="task-title"
ref={inputRef}
value={input()}
onInput={(e) => setInput(e.currentTarget.value)}
onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
class="border-none shadow-none focus-visible:ring-0 text-lg"
/>
</TextField>
<Button
size="icon"
variant="ghost"
onClick={() => setIsOpen(false)}
class="ml-2 md:hidden h-9 w-9 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted"
>
<X size={20} />
</Button>
</div>
{/* Row 1: Priority, Size, Urgency */}
<div class="flex flex-col md:flex-row flex-wrap items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
<div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">