From 532b9ce78d354383168ca813c6df34660fd6ca8a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 20:22:22 +0700
Subject: [PATCH] Fix OrderDetailBottomSheet backdrop to not overlap panel

Restructured z-index layering:
- Parent container: fixed inset-0 z-40 with pointer-events-none
- Backdrop: only covers map area (lg:left-96 on desktop)
- Sheet content: z-50, positioned above backdrop
---
 app/components/catalog/OrderDetailBottomSheet.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/components/catalog/OrderDetailBottomSheet.vue b/app/components/catalog/OrderDetailBottomSheet.vue
index fabfcc7..767c5cd 100644
--- a/app/components/catalog/OrderDetailBottomSheet.vue
+++ b/app/components/catalog/OrderDetailBottomSheet.vue
@@ -2,17 +2,19 @@
   <Transition name="order-slide">
     <div
       v-if="isOpen && orderUuid"
-      class="fixed left-0 right-0 lg:left-96 bottom-0 z-50 flex flex-col"
-      style="height: 70vh"
+      class="fixed inset-0 z-40 pointer-events-none"
     >
-      <!-- Backdrop (clickable to close) - only covers map area, not panel -->
+      <!-- Backdrop (clickable to close) - only covers map area on desktop -->
       <div
-        class="absolute inset-0 -top-[30vh] bg-black/30"
+        class="absolute inset-0 lg:left-96 bg-black/30 pointer-events-auto"
         @click="emit('close')"
       />
 
-      <!-- Sheet content -->
-      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
+      <!-- Sheet content - positioned at bottom, above backdrop -->
+      <div
+        class="absolute left-0 right-0 lg:left-96 bottom-0 z-50 flex flex-col bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden pointer-events-auto"
+        style="height: 70vh"
+      >
         <!-- Header with drag handle and close -->
         <div class="sticky top-0 z-10 bg-black/30 backdrop-blur-md border-b border-white/10">
           <div class="flex justify-center py-2">