added task size guide text and ensured longer guidetext doesn't cause dropdowns to get pushed off the quick add card

src/components/QuickEntry.tsx

@@ -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,11 +276,21 @@ 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">
+                            <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">
                                     <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
                                         Priority <span class="text-destructive">*</span>
                                     </label>
@@ -312,7 +322,7 @@ export const QuickEntry: Component = () => {
                                     </Select>
                                 </div>
 
-                            <div class="flex-1 space-y-1.5">
+                                <div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
                                     <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
                                     <Select<any>
                                         value={size()}
@@ -342,7 +352,7 @@ export const QuickEntry: Component = () => {
                                     </Select>
                                 </div>
 
-                            <div class="flex-1 space-y-1.5">
+                                <div class="flex-1 min-w-0 md:min-w-[140px] space-y-1.5">
                                     <label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
                                         Urgency <span class="text-destructive">*</span>
                                     </label>
@@ -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>

src/lib/constants.ts

@@ -37,15 +37,15 @@ export const URGENCY_HOURS: Record<number, number> = {
 };
 
 export const SIZE_OPTIONS = [
-    { value: "10", label: "10 - Huge" },
-    { value: "9", label: "9" },
-    { value: "8", label: "8" },
-    { value: "7", label: "7" },
-    { value: "6", label: "6" },
-    { value: "5", label: "5" },
-    { value: "4", label: "4" },
-    { value: "3", label: "3" },
-    { value: "2", label: "2" },
-    { value: "1", label: "1" },
-    { value: "0", label: "0 - Tiny" }
+    { value: "10", label: "10 - Multiple Days" },
+    { value: "9", label: "9 - More than a day" },
+    { value: "8", label: "8 - One day" },
+    { value: "7", label: "7 - Half a day" },
+    { value: "6", label: "6 - Two hours" },
+    { value: "5", label: "5 - One hour" },
+    { value: "4", label: "4 - Forty-Five minutes" },
+    { value: "3", label: "3 - Thirty minutes" },
+    { value: "2", label: "2 - Fifteen minutes" },
+    { value: "1", label: "1 - Five minutes" },
+    { value: "0", label: "0 - Less than a minute" }
 ];