[backport cloud/1.42] fix(load3d): fix squashed controls in 3D inspector side panel (#10768) (#10900)

Backport of #10768 to cloud/1.42. Clean cherry-pick.

Co-authored-by: Kelly Yang <124ykl@gmail.com>

src/components/load3d/Load3dViewerContent.vue

@@ -197,4 +197,15 @@ onBeforeUnmount(() => {
 :deep(.p-panel-content) {
   padding: 0;
 }
+
+:deep(.p-slider) {
+  height: 6px;
+}
+
+:deep(.p-slider-handle) {
+  width: 14px;
+  height: 14px;
+  margin-top: -4px;
+  margin-left: -7px;
+}
 </style>

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="space-y-4">
-    <div class="space-y-4">
-      <label>
-        {{ t('load3d.viewer.cameraType') }}
-      </label>
+    <div class="flex flex-col gap-2">
+      <label>{{ t('load3d.viewer.cameraType') }}</label>
       <Select
         v-model="cameraType"
         :options="cameras"
@@ -13,7 +11,7 @@
       </Select>
     </div>
 
-    <div v-if="showFOVButton" class="space-y-4">
+    <div v-if="showFOVButton" class="flex flex-col gap-2">
       <label>{{ t('load3d.fov') }}</label>
       <Slider
         v-model="fov"

src/components/load3d/controls/viewer/ViewerLightControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div class="flex flex-col gap-2">
     <label>{{ $t('load3d.lightIntensity') }}</label>
 
     <Slider

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-4">
-    <div>
+    <div class="flex flex-col gap-2">
       <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div v-if="!hideMaterialMode">
+    <div v-if="!hideMaterialMode" class="flex flex-col gap-2">
       <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div v-if="!hasBackgroundImage">
+    <div v-if="!hasBackgroundImage" class="flex flex-col gap-2">
       <label>
         {{ $t('load3d.backgroundColor') }}
       </label>
-      <input v-model="backgroundColor" type="color" class="w-full" />
+      <input v-model="backgroundColor" type="color" class="h-8 w-full" />
     </div>
 
     <div>