src/pages/Monitor/MonitorClientsActions.vue

@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import SalesClientTable from './SalesClientsTable.vue';
 import SalesOrdersTable from './SalesOrdersTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -24,7 +25,10 @@ onUnmounted(() => (stateStore.leftDrawer = true));
             />
         </Teleport>
     </template>
-    <div class="q-pa-md container" style="gap: 10px">
+    <VnRow
+        class="q-pa-md"
+        :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row' }"
+    >
         <div style="flex: 0.4">
             <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
             <SalesClientTable />
@@ -33,15 +37,5 @@ onUnmounted(() => (stateStore.leftDrawer = true));
             <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
             <SalesOrdersTable />
         </div>
-    </div>
+    </VnRow>
 </template>
-
-<style lang="scss" scoped>
-.container {
-    display: flex;
-
-    @media (max-width: $breakpoint-md-max) {
-        flex-direction: column;
-    }
-}
-</style>