fixed mobile task adding

This commit is contained in:
2026-02-06 09:32:55 -06:00
parent f783c20f60
commit 51d0624eb1
+18 -7
View File
@@ -1,6 +1,6 @@
import { type Component, createSignal, createEffect, onCleanup, onMount, For, Show } from "solid-js";
import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, upsertTagDefinition, type TaskTemplate } from "@/store";
import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown, Gauge } from "lucide-solid";
import { Search, Command, Clock, ArrowUpCircle, Plus, Copy, ChevronDown, Gauge, X } from "lucide-solid";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { TextField, TextFieldInput } from "@/components/ui/textfield";
@@ -258,11 +258,11 @@ export const QuickEntry: Component = () => {
</Button>
{isOpen() && (
<div class="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh] px-4">
<div class="fixed inset-0 z-[100] flex items-end md:items-start justify-center md:pt-[15vh] px-0 md:px-4 pb-0 md:pb-4">
<div class="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
<div class="relative w-full max-w-xl bg-card border border-border rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
<div class="flex items-center px-4 py-3 border-b border-border">
<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
@@ -276,8 +276,18 @@ export const QuickEntry: Component = () => {
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 */}
<div class="flex-1 overflow-y-auto overscroll-contain">
{/* Row 1: Priority, Size, Urgency */}
<div class="flex flex-col md:flex-row items-stretch md:items-center p-4 gap-4 border-b border-border bg-muted/10">
<div class="flex-1 space-y-1.5">
@@ -431,18 +441,19 @@ export const QuickEntry: Component = () => {
</div>
</div>
<div class="px-4 py-3 bg-card border-b border-border min-h-[120px] max-h-[300px] overflow-y-auto">
<div class="px-4 py-3 bg-card min-h-[80px]">
<Suspense fallback={<div class="h-20 animate-pulse bg-muted/20 rounded-lg" />}>
<TaskEditor
content={description()}
onUpdate={setDescription}
onEditorReady={setEditorInstance}
class="min-h-[100px] prose-sm"
class="min-h-[60px] prose-sm"
/>
</Suspense>
</div>
</div>
<div class="p-4 bg-muted/30 flex justify-between items-center">
<div class="p-4 bg-muted/30 flex justify-between items-center shrink-0 border-t border-border">
<div class="flex items-center space-x-2 text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
<Command size={10} />
<span class="hidden sm:inline">K to focus Enter to Add</span>