bugfix

web/src/components/BottomTray.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount, type Component } from 'vue'
+import { ref, computed, type Component } from 'vue'
 import Tabs from 'primevue/tabs'
 import TabList from 'primevue/tablist'
 import Tab from 'primevue/tab'
@@ -53,29 +53,19 @@ function closeTab(tabId: string) {
 let resizeStartY = 0
 let resizeStartHeight = 0
 
-function startResize(e: MouseEvent) {
+function startResize(e: PointerEvent) {
   e.preventDefault()
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
   resizeStartY = e.clientY
   resizeStartHeight = expandedHeight.value
-  document.addEventListener('mousemove', onResizeMove)
-  document.addEventListener('mouseup', stopResize)
 }
 
-function onResizeMove(e: MouseEvent) {
+function onResizeMove(e: PointerEvent) {
+  if (!e.buttons) return
   const delta = resizeStartY - e.clientY  // dragging up increases height
   expandedHeight.value = Math.max(MIN_EXPANDED, resizeStartHeight + delta)
 }
 
-function stopResize() {
-  document.removeEventListener('mousemove', onResizeMove)
-  document.removeEventListener('mouseup', stopResize)
-}
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', onResizeMove)
-  document.removeEventListener('mouseup', stopResize)
-})
-
 defineExpose({
   openTab(id: string, label: string, component: Component, props?: Record<string, any>) {
     const existing = tempTabs.value.find(t => t.id === id)
@@ -90,7 +80,7 @@ defineExpose({
 
 <template>
   <div class="bottom-tray" :style="trayStyle">
-    <div v-if="isExpanded" class="tray-resize-handle" @mousedown="startResize" />
+    <div v-if="isExpanded" class="tray-resize-handle" @pointerdown="startResize" @pointermove="onResizeMove" />
     <Tabs :value="activeTab" class="tray-tabs">
       <TabList class="tray-tab-list">
         <Tab value="orders" @click="onTabClick('orders')">Orders</Tab>
@@ -107,7 +97,9 @@ defineExpose({
           <button class="tab-close-btn" @click.stop="closeTab(tab.id)">×</button>
         </Tab>
         <div class="tray-spacer" />
-        <button v-if="isExpanded" class="tray-close-btn" @click="isExpanded = false">✕</button>
+        <button v-if="isExpanded" class="tray-close-btn" @click="isExpanded = false" title="Minimize">
+          <i class="pi pi-chevron-down" />
+        </button>
       </TabList>
       <TabPanels v-if="isExpanded" class="tray-panels">
         <TabPanel value="orders" class="tray-panel"><OrdersTab /></TabPanel>