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

Notes view layout fixes

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-04 14:07:33 -06:00
parent 0bc9c74797
commit ac119c288b
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/NotepadView.tsx
+26 -22
View File
@@ -175,7 +175,7 @@ export const NotepadView: Component<{
<>
{/* Editor Area */}
<div class="flex-1 flex flex-col min-w-0 md:h-full overflow-visible md:overflow-y-auto relative p-4 md:p-6 space-y-4 md:space-y-6 scroll-smooth">
<div class="space-y-4">
<div class="space-y-4 sticky top-0 z-30 bg-card/95 backdrop-blur-sm pt-4 pb-2 -mt-4 -mx-4 px-4 md:pt-6 md:-mt-6 md:-mx-6 md:px-6 md:pb-2">
<div class="flex items-start justify-between gap-4">
<input
class="text-3xl sm:text-4xl font-black tracking-tight bg-transparent border-none outline-none focus:ring-0 flex-1 placeholder:text-muted-foreground/30 px-0 min-w-0"
@@ -200,17 +200,6 @@ export const NotepadView: Component<{
</Show>
</Button>
</Show>
<Show when={isOwner}>
<Button
variant="ghost"
size="icon"
class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg"
onClick={() => handleDeleteNote(note().id)}
>
<Trash2 size={16} />
</Button>
</Show>
</div>
</div>
@@ -245,7 +234,7 @@ export const NotepadView: Component<{
}}
>
<div class={cn("flex items-center gap-2", !isLinkedTasksOpen() && "md:flex-col")}>
<ChevronRight size={14} class={cn("text-muted-foreground transition-all duration-300 group-hover:text-foreground", !isLinkedTasksOpen() ? "rotate-90 md:rotate-0" : "rotate-90 md:rotate-180")} />
<ChevronRight size={14} class={cn("text-muted-foreground transition-all duration-300 group-hover:text-foreground", !isLinkedTasksOpen() ? "-rotate-90 md:rotate-180" : "rotate-90 md:rotate-0")} />
<Show when={isLinkedTasksOpen()} fallback={
<div class="hidden md:flex items-center justify-center -rotate-90 origin-center whitespace-nowrap mt-8 text-[0.625rem] font-bold uppercase tracking-widest text-muted-foreground/50">
<Link size={10} class="mr-2 rotate-90" />
@@ -354,19 +343,34 @@ export const NotepadView: Component<{
</div>
</Show>
</div>
<Show when={!props.hideNavigation}>
{/* Sticky Full-Width Mobile Close Footer */}
<div class="md:hidden sticky bottom-0 z-[60] p-4 bg-background/95 backdrop-blur-sm border-t border-border flex justify-end shrink-0 w-full shadow-[0_-10px_40px_-5px_hsl(var(--background))]">
{/* Sticky Footer Actions (Match TaskDetail style) */}
<div class="px-6 py-4 border-t border-border/50 md:hidden flex items-center justify-between shrink-0 bg-background/95 backdrop-blur-sm z-40 w-full sticky bottom-0">
{/* Delete button (persistent for owner) */}
<Show when={isOwner}>
<Button
variant="secondary"
class="w-full h-11 rounded-xl text-sm font-bold shadow-sm"
variant="ghost"
size="sm"
class="h-9 px-3 gap-2 hover:bg-destructive/10 hover:text-destructive text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={() => handleDeleteNote(note().id)}
>
<Trash2 size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Delete</span>
</Button>
</Show>
<Show when={!props.hideNavigation}>
{/* Close button (Mobile only) */}
<Button
variant="ghost"
size="sm"
class="md:hidden h-9 px-3 gap-2 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={() => props.setSelectedNoteId(null)}
>
<X size={16} class="mr-2" />
Close Note
<X size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Close</span>
</Button>
</div>
</Show>
</Show>
</div>
</>
);
}}