Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Made font size match device preference

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-17 17:15:07 -06:00
parent 49cbe6abb2
commit 759083ea7d
10 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+11 -11
View File
@@ -55,7 +55,7 @@ export const FilterBar: Component = () => {
<button
onClick={() => setFilter({ editedToday: !store.filter.editedToday })}
class={cn(
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-tight transition-all border",
"flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[0.5625rem] font-black uppercase tracking-tight transition-all border",
store.filter.editedToday
? "bg-primary/10 text-primary border-primary/20"
: "bg-muted/50 text-muted-foreground border-transparent hover:bg-muted"
@@ -70,7 +70,7 @@ export const FilterBar: Component = () => {
<Button
variant="ghost"
size="sm"
class="h-7 px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
class="h-7 px-2 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
onClick={clearFilter}
>
Clear
@@ -109,7 +109,7 @@ export const FilterBar: Component = () => {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
{/* Priority Range */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
<Select
value={store.filter.priorityMin.toString()}
@@ -144,7 +144,7 @@ export const FilterBar: Component = () => {
{/* Urgency Range */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
<Select
value={store.filter.urgencyMin.toString()}
@@ -180,9 +180,9 @@ export const FilterBar: Component = () => {
{/* Tags Multi-select */}
<div class="space-y-2.5">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
Filter by Tags
<span class="text-[9px] lowercase font-medium opacity-50 tracking-normal text-right">
<span class="text-[0.5625rem] lowercase font-medium opacity-50 tracking-normal text-right">
Click tag name to toggle exclude<br />
Click X to remove
</span>
@@ -245,7 +245,7 @@ export const FilterBar: Component = () => {
placeholder="Add tag..."
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
<span>+ Tag</span>
</SelectTrigger>
<SelectContent />
@@ -257,14 +257,14 @@ export const FilterBar: Component = () => {
{/* Filter Templates Section */}
<div class="px-4 pb-4 pt-4 border-t border-border/50 space-y-4 bg-muted/5">
<div class="flex items-center justify-between ml-1">
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<label class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
<Bookmark size={12} class="text-primary" />
Saved Filters
</label>
<Show when={!isSaving() && hasActiveFilters()}>
<button
onClick={() => setIsSaving(true)}
class="text-[9px] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
class="text-[0.5625rem] font-bold uppercase tracking-wider text-primary hover:underline flex items-center gap-1"
>
<Save size={10} />
Save Current
@@ -318,7 +318,7 @@ export const FilterBar: Component = () => {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<For each={store.filterTemplates} fallback={
<div class="col-span-2 py-4 text-center border border-dashed border-border/40 rounded-xl bg-muted/5">
<p class="text-[10px] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
<p class="text-[0.625rem] text-muted-foreground uppercase tracking-widest">No saved filters yet</p>
</div>
}>
{(template) => (
@@ -328,7 +328,7 @@ export const FilterBar: Component = () => {
onClick={() => applyFilterTemplate(template.id)}
>
<div class="flex items-center gap-2">
<p class="text-[11px] font-bold text-foreground truncate">{template.name}</p>
<p class="text-[0.6875rem] font-bold text-foreground truncate">{template.name}</p>
<div class="flex gap-1 opacity-60 shrink-0">
<Show when={template.filter.query}>
<div class="w-1 h-1 rounded-full bg-primary" />
src/components/ImportTool.tsx
+15 -15
View File
@@ -137,7 +137,7 @@ export const ImportTool: Component = () => {
<Show when={step() === "paste"}>
<div class="space-y-3 animate-in fade-in duration-300">
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Paste your task list
</label>
<textarea
@@ -154,7 +154,7 @@ export const ImportTool: Component = () => {
</p>
<Button
size="sm"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-4"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-4"
disabled={!rawText().trim()}
onClick={parseText}
>
@@ -170,13 +170,13 @@ export const ImportTool: Component = () => {
{/* Bulk defaults */}
<div class="p-3 rounded-xl bg-muted/30 border border-border/50 space-y-3">
<div class="flex items-center justify-between">
<p class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
<p class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">
Bulk Defaults
</p>
<Button
variant="ghost"
size="sm"
class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg"
class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg"
onClick={applyBulkDefaults}
>
Apply to All
@@ -185,7 +185,7 @@ export const ImportTool: Component = () => {
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Priority</label>
<select
value={bulkPriority()}
onChange={(e) => setBulkPriority(e.currentTarget.value)}
@@ -197,7 +197,7 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Urgency</label>
<select
value={bulkUrgency()}
onChange={(e) => setBulkUrgency(e.currentTarget.value)}
@@ -209,7 +209,7 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Size</label>
<select
value={bulkSize()}
onChange={(e) => setBulkSize(e.currentTarget.value)}
@@ -221,14 +221,14 @@ export const ImportTool: Component = () => {
</select>
</div>
<div class="space-y-1">
<label class="text-[9px] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
<label class="text-[0.5625rem] font-bold uppercase tracking-wider text-muted-foreground/70 ml-0.5">Tags</label>
<div class="flex items-center gap-1 flex-wrap">
<TagPicker selectedTags={bulkTags()} onTagsChange={setBulkTags} />
<For each={bulkTags()}>
{(tag) => (
<Badge
variant="secondary"
class="h-6 px-1.5 text-[10px] gap-1 cursor-pointer hover:bg-destructive/10"
class="h-6 px-1.5 text-[0.625rem] gap-1 cursor-pointer hover:bg-destructive/10"
onClick={() => setBulkTags(bulkTags().filter(t => t !== tag))}
>
{tag}
@@ -250,7 +250,7 @@ export const ImportTool: Component = () => {
<Button
variant="ghost"
size="sm"
class="h-7 text-[10px] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
class="h-7 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg text-muted-foreground"
onClick={reset}
>
← Back
@@ -284,7 +284,7 @@ export const ImportTool: Component = () => {
<select
value={task.priority}
onChange={(e) => updateTask(task.id, "priority", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Priority"
>
<For each={PRIORITY_OPTIONS}>
@@ -295,7 +295,7 @@ export const ImportTool: Component = () => {
<select
value={task.urgency}
onChange={(e) => updateTask(task.id, "urgency", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Urgency"
>
<For each={URGENCY_OPTIONS}>
@@ -306,7 +306,7 @@ export const ImportTool: Component = () => {
<select
value={task.size}
onChange={(e) => updateTask(task.id, "size", e.currentTarget.value)}
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[11px] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
class="h-7 rounded-lg border border-input bg-background px-1.5 text-[0.6875rem] shadow-sm outline-none focus:ring-1 focus:ring-ring appearance-none"
title="Size"
>
<For each={SIZE_OPTIONS}>
@@ -323,7 +323,7 @@ export const ImportTool: Component = () => {
{(tag) => (
<Badge
variant="secondary"
class="h-6 px-1.5 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/10"
class="h-6 px-1.5 text-[0.625rem] gap-0.5 cursor-pointer hover:bg-destructive/10"
onClick={() => updateTask(task.id, "tags", task.tags.filter(t => t !== tag))}
>
{tag}
@@ -352,7 +352,7 @@ export const ImportTool: Component = () => {
</Show>
<Button
size="sm"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[10px] h-9 px-5"
class="gap-2 rounded-xl font-bold uppercase tracking-wider text-[0.625rem] h-9 px-5"
disabled={tasks().length === 0 || importing()}
onClick={handleImport}
>
src/components/Navigation.tsx
+6 -6
View File
@@ -68,7 +68,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
)}
>
<group.icon size={20} />
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
<span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
</button>
}>
<Popover>
@@ -82,7 +82,7 @@ export const BottomNav: Component<{ currentView: string; setView: (v: string) =>
<group.icon size={20} />
<ChevronDown size={10} class="absolute -right-2 -bottom-0.5 opacity-60" />
</div>
<span class="text-[10px] font-medium uppercase tracking-wider">{group.label}</span>
<span class="text-[0.625rem] font-medium uppercase tracking-wider">{group.label}</span>
</PopoverTrigger>
<PopoverContent class="w-40 p-1 bg-card border-border shadow-xl mb-2">
<div class="space-y-0.5">
@@ -233,9 +233,9 @@ export const ContextSwitcher: Component<{
<div class="py-1">
<div class="h-px bg-border/50" />
</div>
<div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<span>Buckets</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{store.subscribedBuckets.length}</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{store.subscribedBuckets.length}</span>
</div>
<For each={store.buckets.filter(b => store.subscribedBuckets.includes(b.id))}>
{(bucket) => (
@@ -262,9 +262,9 @@ export const ContextSwitcher: Component<{
<div class="py-1">
<div class="h-px bg-border/50" />
</div>
<div class="px-2 py-1 text-[10px] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<div class="px-2 py-1 text-[0.625rem] font-bold uppercase text-muted-foreground tracking-wider flex items-center gap-2">
<span>Oversight</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[9px]">{oversightUsers()?.length}</span>
<span class="ml-auto bg-muted px-1.5 rounded text-[0.5625rem]">{oversightUsers()?.length}</span>
</div>
<For each={oversightUsers()}>
{(user) => (
src/components/QuickEntry.tsx
+7 -7
View File
@@ -290,7 +290,7 @@ export const QuickEntry: Component = () => {
{/* 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">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Priority <span class="text-destructive">*</span>
</label>
<Select<any>
@@ -322,7 +322,7 @@ export const QuickEntry: Component = () => {
</div>
<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>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Size</label>
<Select<any>
value={size()}
onChange={(val) => {
@@ -352,7 +352,7 @@ export const QuickEntry: Component = () => {
</div>
<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">
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">
Urgency <span class="text-destructive">*</span>
</label>
<Select<any>
@@ -421,7 +421,7 @@ export const QuickEntry: Component = () => {
</div>
<div class="w-full md:w-auto md:min-w-[200px] space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground ml-1">Due Date</label>
<div class="relative">
<input
type="datetime-local"
@@ -453,7 +453,7 @@ export const QuickEntry: Component = () => {
</div>
<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">
<div class="flex items-center space-x-2 text-[0.625rem] font-bold text-muted-foreground uppercase tracking-widest">
<Command size={10} />
<span class="hidden sm:inline">K to focus • Enter to Add</span>
<span class="sm:hidden">Enter to Add</span>
@@ -469,7 +469,7 @@ export const QuickEntry: Component = () => {
class="h-9 px-3 gap-2 hover:bg-primary/10 hover:text-primary text-muted-foreground transition-all rounded-xl border border-border/40"
>
<Copy size={14} />
<span class="text-[10px] font-bold uppercase tracking-wider hidden sm:inline">Use Template</span>
<span class="text-[0.625rem] font-bold uppercase tracking-wider hidden sm:inline">Use Template</span>
<ChevronDown size={12} class="opacity-50" />
</PopoverTrigger>
<PopoverContent class="w-64 p-2 bg-card border-border shadow-xl">
@@ -485,7 +485,7 @@ export const QuickEntry: Component = () => {
</div>
<div class="min-w-0">
<p class="text-sm font-bold truncate tracking-tight">{template.name}</p>
<p class="text-[9px] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
<p class="text-[0.5625rem] uppercase font-black text-muted-foreground opacity-60 tracking-widest">
P:{template.priority} / U:{template.urgency}
</p>
</div>
src/components/SlashMenu.tsx
+1 -1
View File
@@ -150,7 +150,7 @@ export const SlashMenu: Component<{
</div>
<div class="flex flex-col min-w-0 overflow-hidden">
<span class="text-sm font-medium leading-none">{item.title}</span>
<span class="text-[11px] text-muted-foreground truncate mt-1">{item.description}</span>
<span class="text-[0.6875rem] text-muted-foreground truncate mt-1">{item.description}</span>
</div>
</button>
)}
src/components/TagPicker.tsx
+2 -2
View File
@@ -63,7 +63,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
</PopoverTrigger>
<PopoverContent class="p-3 w-[min(calc(100vw-2rem),280px)] flex flex-col gap-3" align="start">
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Tag Name</label>
<div class="relative">
<input
list="existing-tags"
@@ -81,7 +81,7 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
</div>
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
<label class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Value (Sorting Influence)</label>
<select
value={valueScore().toString()}
onInput={(e) => setValueScore(parseInt(e.currentTarget.value))}
src/components/TaskCard.tsx
+5 -5
View File
@@ -73,7 +73,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{props.task.title}
</h3>
{props.task.content && (
<div class="text-[11px] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
<div class="text-[0.6875rem] sm:text-xs text-muted-foreground/60 line-clamp-1 mt-1 leading-tight whitespace-pre">
{(() => {
let html = props.task.content || "";
// Replace block tags with newlines first to preserve structure
@@ -97,7 +97,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{/* Priority */}
<div class="flex items-center gap-1.5 shrink-0">
<ArrowUpCircle size={12} class="text-primary opacity-60" />
<span class="text-[10px] font-medium">P{props.task.priority}</span>
<span class="text-[0.625rem] font-medium">P{props.task.priority}</span>
</div>
{/* Shared Indicator - shows for individual shares OR tag-based ShareRules */}
@@ -132,7 +132,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{(tag) => (
<Badge
variant="secondary"
class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0"
class="h-4 px-1.5 text-[0.5625rem] gap-1 bg-muted/50 border-border/50 shrink-0"
style={{
"background-color": (() => {
const def = store.tagDefinitions.find(d => d.name === tag);
@@ -166,7 +166,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
{/* Due Date + Urgency Slide-out */}
<div class="relative group/date flex items-center h-5 cursor-help shrink-0 min-w-0">
{/* Due Date - Static Layer on Top */}
<div class="flex items-center space-x-1 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<div class="flex items-center space-x-1 text-[0.5625rem] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<Clock size={11} class="text-primary/60" />
<span class="truncate">{formattedDate()}</span>
</div>
@@ -176,7 +176,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
"absolute left-4 top-0 bottom-0 flex items-center transition-all duration-300 ease-out z-10 opacity-0 group-hover/date:opacity-100 group-hover/date:left-full whitespace-nowrap",
urgencyColor()
)}>
<span class="text-[9px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
<span class="text-[0.5625rem] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
Urgency {urgencyLevel()}
</span>
</div>
src/components/TaskDetail.tsx
+11 -11
View File
@@ -181,7 +181,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Priority */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
<Select<any>
value={props.task.priority.toString()}
onChange={(val: string | null) => val && updatePriority(val)}
@@ -205,7 +205,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Urgency */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Time</span>
<Select<any>
value={currentUrgency()}
onChange={(val: string | null) => val && updateUrgency(val)}
@@ -229,7 +229,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Size */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Size</span>
<Select<any>
value={(props.task.size ?? 5).toString()}
onChange={(val: any) => {
@@ -262,7 +262,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
<Button
variant="ghost"
size="sm"
class="h-8 px-1 sm:px-2 text-[10px] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
class="h-8 px-1 sm:px-2 text-[0.625rem] font-bold uppercase tracking-wider hover:bg-muted/50 flex items-center gap-1 sm:gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
onClick={() => {
const instance = editorInstance();
if (instance) {
@@ -325,7 +325,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Tags at the bottom */}
<div class="mt-auto pt-6 border-t border-border/50">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<span class="text-[0.625rem] uppercase font-bold tracking-wider text-muted-foreground/60 shrink-0">Tags</span>
<div class="flex flex-wrap items-center gap-1.5 min-w-0 flex-1">
<TagPicker
selectedTags={props.task.tags || []}
@@ -404,7 +404,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
<PopoverContent class="w-72 p-0 overflow-hidden" align="end">
<div class="flex flex-col">
<div class="p-2 border-b border-border/50">
<div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
<div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1">Recurrence</div>
<div class="flex flex-col gap-2 p-2 pt-0">
<Select
value={props.task.recurrence?.type || "none"}
@@ -442,7 +442,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{(day, index) => (
<button
class={cn(
"w-7 h-7 rounded-full text-[10px] font-bold flex items-center justify-center transition-colors shadow-sm",
"w-7 h-7 rounded-full text-[0.625rem] font-bold flex items-center justify-center transition-colors shadow-sm",
props.task.recurrence?.days?.includes(index())
? "bg-primary text-primary-foreground"
: "bg-muted text-muted-foreground hover:bg-muted/80"
@@ -509,7 +509,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
{/* Sharing Section */}
<div class="p-2 border-t border-border/50">
<div class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
<div class="text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground/70 px-2 py-1 mb-1">Sharing</div>
<UserSharePicker
taskId={props.task.id}
sharedWith={props.task.sharedWith || []}
@@ -569,12 +569,12 @@ const MetadataItem: Component<{
isToggled() ? "-translate-y-4" : "translate-y-0"
)}>
{/* Layer 1: Date */}
<div class="h-4 flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/80 whitespace-nowrap">
<div class="h-4 flex items-center gap-1.5 text-[0.6875rem] font-medium text-muted-foreground/80 whitespace-nowrap">
{props.icon}
{props.date}
</div>
{/* Layer 2: Time */}
<div class="h-4 flex items-center gap-2 text-[11px] font-bold text-foreground whitespace-nowrap">
<div class="h-4 flex items-center gap-2 text-[0.6875rem] font-bold text-foreground whitespace-nowrap">
<Clock size={11} class="text-primary/60 shrink-0" />
<span>{props.time}</span>
</div>
@@ -706,7 +706,7 @@ const UserSharePicker: Component<{
{rule.type === 'tag' ? <Tag size={10} /> : <Settings size={10} />}
</div>
<div class="flex flex-col min-w-0">
<span class="text-[11px] font-medium leading-none truncate">
<span class="text-[0.6875rem] font-medium leading-none truncate">
{getUserName(rule.targetUserId)}
</span>
<span class="text-[9px] text-muted-foreground/50 mt-0.5 uppercase tracking-tighter">