on linux, when I click the new task button, the toast and the dimming of the background don't respect the visual borders of the app

- Changed `fixed` to `absolute` positioning in NewTaskInput.svelte backdrop div so the overlay respects the app's visual container bounds on Linux (where a p-2 padded, rounded-xl container creates visual borders)
it looks mostly good now, except that when the toast slides up, it's causing the rest of the app content to jitter

- Added `overflow-hidden` to the outer wrapper div in NewTaskInput.svelte to contain the translate-y-full animation within its own layer and prevent repaint jitter on sibling content
when workspace settings is up, can we make it so I can drag the header to move the app around?

- Added data-tauri-drag-region to the header and title in SettingsScreen.svelte so the settings header can be used to drag/move the window
This commit is contained in:
Tristan Michael 2026-04-14 05:55:20 -07:00
parent 34d7e8b17d
commit 6be1ee93c0
2 changed files with 3 additions and 2 deletions

View file

@ -62,7 +62,7 @@
<!-- Backdrop + sheet wrapper --> <!-- Backdrop + sheet wrapper -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div
class="fixed inset-0 z-50 flex flex-col justify-end transition-opacity duration-250 ease-out {newTaskState.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}" class="absolute inset-0 z-50 flex flex-col justify-end overflow-hidden transition-opacity duration-250 ease-out {newTaskState.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
style="background: rgba(0,0,0,0.4)" style="background: rgba(0,0,0,0.4)"
onclick={handleClose} onclick={handleClose}
onkeydown={(e) => { if (e.key === "Escape") handleClose(); }} onkeydown={(e) => { if (e.key === "Escape") handleClose(); }}

View file

@ -94,9 +94,10 @@
<svelte:window onclick={handleWindowClick} /> <svelte:window onclick={handleWindowClick} />
<header <header
data-tauri-drag-region
class="flex items-center justify-between border-b border-border-light px-4 py-3 dark:border-border-dark" class="flex items-center justify-between border-b border-border-light px-4 py-3 dark:border-border-dark"
> >
<h1 class="text-lg font-bold">Workspace Settings</h1> <h1 class="text-lg font-bold" data-tauri-drag-region>Workspace Settings</h1>
<button <button
onclick={() => onclose?.()} onclick={() => onclose?.()}
class="rounded-lg p-1.5 hover:bg-black/5 dark:hover:bg-white/10" class="rounded-lg p-1.5 hover:bg-black/5 dark:hover:bg-white/10"