fix(ui): impeccable detect — perf + taste touch-ups across four components
Mechanical fixes from `npx impeccable detect`: - Sidebar.svelte: replace `transition: width, min-width` on the aside with a wrapping CSS-grid container animating `grid-template-columns`. Avoids per-frame layout cost from animating `width` directly. - MorningTriageModal.svelte: swap pure `bg-black/50` overlay for the brand deep-neutral `rgba(26, 24, 22, 0.5)` (#1a1816 @ 50%). TODO left in source to promote this to a `--color-overlay` token in app.css. - Toggle.svelte: drop bouncy `cubic-bezier(0.34, 1.56, 0.64, 1)` (1.56 overshoot) for ease-out-quart `cubic-bezier(0.16, 1, 0.3, 1)`. Still snappy, no overshoot — better fit for a toggle. - TasksPage.svelte: same grid-template-columns refactor as Sidebar for the list-sidebar `transition: width` declaration. Verification: - npm run check: 1 pre-existing error (vite.config.js:5), 1 unrelated warning in SettingsGroup (out of scope, owned by parallel subagent). - npm run build: clean. - cargo clippy --all-targets -- -D warnings: clean (with LIBCLANG_PATH). - cargo test --workspace: 283 passed, 0 failed. - cargo fmt --check: pre-existing diffs in main.rs / lib.rs (no Rust files were touched in this commit). Manual smoke deferred — `npm run dev` is in use by the SettingsPage subagent, so the build-clean signal is the proxy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -458,11 +458,20 @@
|
||||
|
||||
<!-- Main content: sidebar + tasks -->
|
||||
<div class="flex flex-1 min-h-0 px-7 pb-4 gap-3">
|
||||
<!--
|
||||
Layout-transition perf fix: was animating `width` directly. Now wraps
|
||||
the list sidebar in a CSS-grid container whose `grid-template-columns`
|
||||
track-size transitions between collapsed/expanded widths. Same visual
|
||||
effect, single transitioning property the browser can handle as a
|
||||
track-spec change rather than a width re-flow each frame.
|
||||
-->
|
||||
<!-- List sidebar -->
|
||||
<div
|
||||
class="flex flex-col bg-bg-elevated rounded-2xl border border-border-subtle overflow-hidden
|
||||
{sidebarCollapsed ? 'w-[40px] min-w-[40px]' : 'w-[160px] min-w-[160px]'}"
|
||||
style="transition: width var(--duration-ui)"
|
||||
class="grid {sidebarCollapsed ? 'grid-cols-[40px]' : 'grid-cols-[160px]'}"
|
||||
style="transition: grid-template-columns var(--duration-ui)"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col bg-bg-elevated rounded-2xl border border-border-subtle overflow-hidden min-w-0"
|
||||
>
|
||||
<!-- Collapse toggle -->
|
||||
<button
|
||||
@@ -561,6 +570,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task list -->
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
|
||||
Reference in New Issue
Block a user