change monitor list layout

src/pages/Monitor/MonitorList.vue

@@ -21,12 +21,8 @@ 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"
-        >
+        <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">
@@ -38,7 +34,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </div>
                 </template>
                 <template #default>
-                <QCard class="card">
+                    <div class="expansion-tables-container">
                         <QCardSection class="col">
                             <span class="flex col q-mb-sm text-body1">
                                 {{ t('salesMonitor.clientsOnWebsite') }}
@@ -51,16 +47,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                             </span>
                             <SalesOrdersTable />
                         </QCardSection>
-                </QCard>
+                    </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;