src/pages/Zone/Card/ZoneLocations.vue

@@ -4,6 +4,8 @@ import ZoneLocationsTree from './ZoneLocationsTree.vue';
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <ZoneLocationsTree />
+        <QCard class="full-width q-pa-md" style="max-width: 800px">
+            <ZoneLocationsTree />
+        </QCard>
     </QPage>
 </template>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -144,42 +144,40 @@ onMounted(async () => {
 </script>
 
 <template>
-    <QCard class="full-width" style="max-width: 800px">
-        <QTree
-            ref="treeRef"
-            :nodes="nodes"
-            node-key="id"
-            label-key="name"
-            v-model:expanded="expanded"
-            @update:expanded="onNodeExpanded($event)"
-            :default-expand-all="true"
-        >
-            <template #default-header="{ node }">
-                <div
-                    :id="node.id"
-                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
-                >
-                    <span v-if="!node.id">{{ node.name }}</span>
-                    <QCheckbox
-                        v-else
-                        v-model="node.selected"
-                        :label="node.name"
-                        @update:model-value="($event) => onSelected($event, node)"
-                        toggle-indeterminate
-                        color="transparent"
-                        :class="[
-                            'checkbox',
-                            node.selected
-                                ? '--checked'
-                                : node.selected == false
-                                ? '--unchecked'
-                                : '--indeterminate',
-                        ]"
-                    />
-                </div>
-            </template>
-        </QTree>
-    </QCard>
+    <QTree
+        ref="treeRef"
+        :nodes="nodes"
+        node-key="id"
+        label-key="name"
+        v-model:expanded="expanded"
+        @update:expanded="onNodeExpanded($event)"
+        :default-expand-all="true"
+    >
+        <template #default-header="{ node }">
+            <div
+                :id="node.id"
+                class="qtr row justify-between full-width q-pr-md cursor-pointer"
+            >
+                <span v-if="!node.id">{{ node.name }}</span>
+                <QCheckbox
+                    v-else
+                    v-model="node.selected"
+                    :label="node.name"
+                    @update:model-value="($event) => onSelected($event, node)"
+                    toggle-indeterminate
+                    color="transparent"
+                    :class="[
+                        'checkbox',
+                        node.selected
+                            ? '--checked'
+                            : node.selected == false
+                            ? '--unchecked'
+                            : '--indeterminate',
+                    ]"
+                />
+            </div>
+        </template>
+    </QTree>
 </template>
 
 <style lang="scss">