fix: only an app page gets the flush panel; elsewhere the card still floats

Over an app the sidebar reads as the panel the header sits on — flush left and bottom,
square, one border down its right side. On every other page it is what it was: a card
inset from the window with rounded corners and a border all round.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Guilhem Lemouel
2026-09-23 15:56:38 +02:00
co-authored by Claude Opus 5
parent 06d191eb82
commit d76de186bb
@@ -1151,16 +1151,17 @@
{/if}
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
<!-- Detached, the drawer starts at the header's bottom edge and runs to the left and
bottom edges of the window — a panel the header sits on top of, not a card
floating over the page. -->
<!-- Detached, the drawer is a card floating over the page, inset and rounded. Over an
app it is not: the app owns the window, and the sidebar revealed beside it reads
as the panel the header sits on — flush to the left and bottom edges, square,
with one border down its right side. -->
<!-- Detached, this outside-click catcher starts where the card does rather than at
the top of the viewport: it would otherwise cover the header's toggle, whose
hover opened the card, and swallow the click meant to put the sidebar back. -->
<div
class={classNames(
'fixed left-0 right-0 bottom-0 flex z-40',
detachedFloating ? '' : 'top-0'
detachedFloating ? (fullBleed ? '' : 'pl-1 pb-2') : 'top-0'
)}
style:top={detachedFloating ? `${navHandleSlot.cardTop}px` : undefined}
onclick={(e) => {
@@ -1182,8 +1183,16 @@
}}
class={classNames(
'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-300 transform',
detachedFloating ? 'border-r shadow-lg overflow-hidden' : '',
menuOpen ? 'translate-x-0' : '-translate-x-full'
detachedFloating
? fullBleed
? 'border-r shadow-lg overflow-hidden'
: 'rounded-lg border shadow-lg overflow-hidden'
: '',
menuOpen
? 'translate-x-0'
: detachedFloating && !fullBleed
? '-translate-x-[calc(100%+0.5rem)]'
: '-translate-x-full'
)}
>
<div