From 812f1797d5f4da88c9a4849ca00fd029311876e6 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Tue, 11 Nov 2025 13:45:11 -0500
Subject: [PATCH] fix warning log (#6650)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

we need to add root div to avoid warning

> Extraneous non-props attributes (data-v-inspector) were passed to
> component but could not be automatically inherited because component
renders fragment or text or teleport root
> nodes.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6650-fix-warning-log-2a86d73d365081a89c5af0c60cdaa618)
by [Unito](https://www.unito.io)
---
 .../controls/viewer/ViewerCameraControls.vue  | 42 ++++++++++---------
 .../controls/viewer/ViewerExportControls.vue  | 27 +++++++-----
 .../controls/viewer/ViewerLightControls.vue   | 18 ++++----
 3 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index a251e80d0..d675ab77a 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -1,26 +1,28 @@
 <template>
   <div class="space-y-4">
-    <label>
-      {{ t('load3d.viewer.cameraType') }}
-    </label>
-    <Select
-      v-model="cameraType"
-      :options="cameras"
-      option-label="title"
-      option-value="value"
-    >
-    </Select>
-  </div>
+    <div class="space-y-4">
+      <label>
+        {{ t('load3d.viewer.cameraType') }}
+      </label>
+      <Select
+        v-model="cameraType"
+        :options="cameras"
+        option-label="title"
+        option-value="value"
+      >
+      </Select>
+    </div>
 
-  <div v-if="showFOVButton" class="space-y-4">
-    <label>{{ t('load3d.fov') }}</label>
-    <Slider
-      v-model="fov"
-      :min="10"
-      :max="150"
-      :step="1"
-      :aria-label="t('load3d.fov')"
-    />
+    <div v-if="showFOVButton" class="space-y-4">
+      <label>{{ t('load3d.fov') }}</label>
+      <Slider
+        v-model="fov"
+        :min="10"
+        :max="150"
+        :step="1"
+        :aria-label="t('load3d.fov')"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/components/load3d/controls/viewer/ViewerExportControls.vue b/src/components/load3d/controls/viewer/ViewerExportControls.vue
index 048fc3db5..6721e65c6 100644
--- a/src/components/load3d/controls/viewer/ViewerExportControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerExportControls.vue
@@ -1,15 +1,22 @@
 <template>
-  <Select
-    v-model="exportFormat"
-    :options="exportFormats"
-    option-label="label"
-    option-value="value"
-  >
-  </Select>
+  <div class="space-y-4">
+    <Select
+      v-model="exportFormat"
+      :options="exportFormats"
+      option-label="label"
+      option-value="value"
+    >
+    </Select>
 
-  <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
-    {{ $t('load3d.export') }}
-  </Button>
+    <Button
+      severity="secondary"
+      text
+      rounded
+      @click="exportModel(exportFormat)"
+    >
+      {{ $t('load3d.export') }}
+    </Button>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/load3d/controls/viewer/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
index bfd1e8faa..ba830198e 100644
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -1,13 +1,15 @@
 <template>
-  <label>{{ $t('load3d.lightIntensity') }}</label>
+  <div class="space-y-4">
+    <label>{{ $t('load3d.lightIntensity') }}</label>
 
-  <Slider
-    v-model="lightIntensity"
-    class="w-full"
-    :min="lightIntensityMinimum"
-    :max="lightIntensityMaximum"
-    :step="lightAdjustmentIncrement"
-  />
+    <Slider
+      v-model="lightIntensity"
+      class="w-full"
+      :min="lightIntensityMinimum"
+      :max="lightIntensityMaximum"
+      :step="lightAdjustmentIncrement"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">