From 33c406995f288a388e50ff1eeeac2542380e3515 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 28 Jan 2026 09:29:17 +0700
Subject: [PATCH] fix(catalog): align QuotePanel style with
 SelectionPanel/InfoPanel

---
 app/components/catalog/QuotePanel.vue | 56 +++++++++++++++------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/app/components/catalog/QuotePanel.vue b/app/components/catalog/QuotePanel.vue
index 71c54f6..2a707f4 100644
--- a/app/components/catalog/QuotePanel.vue
+++ b/app/components/catalog/QuotePanel.vue
@@ -1,42 +1,50 @@
 <template>
-  <MapPanel>
-    <template #header>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="flex-shrink-0 p-4 border-b border-white/10">
       <div class="flex items-center justify-between">
-        <h3 class="font-semibold text-base text-base-content">{{ $t('catalog.headers.offers') }}</h3>
+        <h3 class="font-semibold text-base text-white">{{ $t('catalog.headers.offers') }}</h3>
         <span class="badge badge-neutral">{{ offers.length }}</span>
       </div>
-    </template>
-
-    <!-- Content -->
-    <div v-if="loading" class="flex items-center justify-center py-8">
-      <span class="loading loading-spinner loading-md" />
     </div>
 
-    <div v-else-if="offers.length === 0" class="text-center py-8 text-white/60">
-      <Icon name="lucide:search-x" size="32" class="mb-2" />
-      <p>{{ $t('catalog.empty.noOffers') }}</p>
-    </div>
+    <!-- Content (scrollable) -->
+    <div class="flex-1 overflow-y-auto p-4">
+      <div v-if="loading" class="flex items-center justify-center py-8">
+        <span class="loading loading-spinner loading-md text-white" />
+      </div>
 
-    <div v-else class="flex flex-col gap-3">
-      <div
-        v-for="offer in offers"
-        :key="offer.uuid"
-        class="cursor-pointer"
-        @click="emit('select-offer', offer)"
-      >
-        <slot name="offer-card" :offer="offer">
-          <OfferCard :offer="offer" linkable />
-        </slot>
+      <div v-else-if="offers.length === 0" class="text-center py-8 text-white/60">
+        <Icon name="lucide:search-x" size="32" class="mb-2" />
+        <p>{{ $t('catalog.empty.noOffers') }}</p>
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <div
+          v-for="offer in offers"
+          :key="offer.uuid"
+          class="cursor-pointer"
+          @click="emit('select-offer', offer)"
+        >
+          <OfferCard :offer="offer" compact selectable />
+        </div>
       </div>
     </div>
-  </MapPanel>
+  </div>
 </template>
 
 <script setup lang="ts">
 interface Offer {
   uuid: string
-  name?: string | null
+  productName?: string | null
   productUuid?: string | null
+  quantity?: number | string | null
+  unit?: string | null
+  pricePerUnit?: number | string | null
+  currency?: string | null
+  locationName?: string | null
+  locationCountry?: string | null
+  locationCountryCode?: string | null
 }
 
 defineProps<{