From 88864fd3a151a861bc121c7db10a8ea43c0a7cf6 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 2 Apr 2026 12:31:56 +0200
Subject: [PATCH] fix(shared-ui): open AppDrawer above PillNav instead of below

The panel was positioned below the trigger button using top, causing
it to render off-screen since PillNav sits at the bottom. Changed to
bottom positioning so the drawer opens upward.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/shared-ui/src/navigation/AppDrawer.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shared-ui/src/navigation/AppDrawer.svelte b/packages/shared-ui/src/navigation/AppDrawer.svelte
index e2d22d82c..944564977 100644
--- a/packages/shared-ui/src/navigation/AppDrawer.svelte
+++ b/packages/shared-ui/src/navigation/AppDrawer.svelte
@@ -28,7 +28,7 @@
 
 	let triggerButton: HTMLButtonElement;
 	let searchInput = $state<HTMLInputElement | undefined>(undefined);
-	let panelPosition = $state({ top: 0, left: 0 });
+	let panelPosition = $state({ bottom: 0, left: 0 });
 	let searchQuery = $state('');
 
 	// Filter apps by search
@@ -50,7 +50,7 @@
 	function toggle() {
 		if (triggerButton) {
 			const rect = triggerButton.getBoundingClientRect();
-			panelPosition = { top: rect.bottom + 8, left: rect.left };
+			panelPosition = { bottom: window.innerHeight - rect.top + 8, left: rect.left };
 		}
 		onToggle(!isOpen);
 	}
@@ -143,7 +143,7 @@
 		<!-- Panel -->
 		<div
 			class="drawer-panel"
-			style="top: {panelPosition.top}px; left: {panelPosition.left}px;"
+			style="bottom: {panelPosition.bottom}px; left: {panelPosition.left}px;"
 			role="dialog"
 			aria-label="App switcher"
 		>
@@ -408,7 +408,7 @@
 	@keyframes panelIn {
 		from {
 			opacity: 0;
-			transform: translateY(-8px);
+			transform: translateY(8px);
 		}
 		to {
 			opacity: 1;