From 399c2723a945ff21249ab5dc99fe5aec35429152 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 10:58:27 -0300
Subject: [PATCH] change monitor list layout

---
 src/pages/Monitor/MonitorList.vue | 59 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
index c7db282c1..a084f0c99 100644
--- a/src/pages/Monitor/MonitorList.vue
+++ b/src/pages/Monitor/MonitorList.vue
@@ -21,46 +21,45 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <QExpansionItem
-            v-model="expanded"
-            dense
-            :duration="150"
-            class="full-width q-mb-lg"
-        >
-            <template v-if="!expanded" #header>
-                <div class="row full-width">
-                    <span class="flex col text-body1">
-                        {{ t('salesMonitor.clientsOnWebsite') }}
-                    </span>
-                    <span class="flex col q-ml-xl text-body1">
-                        {{ t('salesMonitor.recentOrderActions') }}
-                    </span>
-                </div>
-            </template>
-            <template #default>
-                <QCard class="card">
-                    <QCardSection class="col">
-                        <span class="flex col q-mb-sm text-body1">
+        <QCard class="full-width q-mb-lg">
+            <QExpansionItem v-model="expanded" dense :duration="150">
+                <template v-if="!expanded" #header>
+                    <div class="row full-width">
+                        <span class="flex col text-body1">
                             {{ t('salesMonitor.clientsOnWebsite') }}
                         </span>
-                        <SalesClientTable />
-                    </QCardSection>
-                    <QCardSection class="col">
-                        <span class="flex col q-mb-sm text-body1">
+                        <span class="flex col q-ml-xl text-body1">
                             {{ t('salesMonitor.recentOrderActions') }}
                         </span>
-                        <SalesOrdersTable />
-                    </QCardSection>
-                </QCard>
-            </template>
-        </QExpansionItem>
+                    </div>
+                </template>
+                <template #default>
+                    <div class="expansion-tables-container">
+                        <QCardSection class="col">
+                            <span class="flex col q-mb-sm text-body1">
+                                {{ t('salesMonitor.clientsOnWebsite') }}
+                            </span>
+                            <SalesClientTable />
+                        </QCardSection>
+                        <QCardSection class="col">
+                            <span class="flex col q-mb-sm text-body1">
+                                {{ t('salesMonitor.recentOrderActions') }}
+                            </span>
+                            <SalesOrdersTable />
+                        </QCardSection>
+                    </div>
+                </template>
+            </QExpansionItem>
+        </QCard>
+
         <SalesTicketsTable />
     </QPage>
 </template>
 
 <style lang="scss" scoped>
-.card {
+.expansion-tables-container {
     display: flex;
+    border-top: 1px solid $color-spacer;
 
     @media (max-width: $breakpoint-md-max) {
         flex-direction: column;