fix issue elipsis

apps/editor/components/ui/panels/reference-panel.tsx

@@ -36,19 +36,19 @@ export function ReferencePanel() {
   return (
     <div className="pointer-events-auto fixed top-20 right-4 z-50 flex w-72 flex-col overflow-hidden rounded-lg border border-border bg-background/95 shadow-xl backdrop-blur-md">
       {/* Header */}
-      <div className="flex items-center justify-between border-b p-3">
-        <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between gap-2 border-b p-3">
+        <div className="flex items-center gap-2 min-w-0">
           {isScan ? (
-            <Box className="h-4 w-4 text-muted-foreground" />
+            <Box className="h-4 w-4 shrink-0 text-muted-foreground" />
           ) : (
-            <Image className="h-4 w-4 text-muted-foreground" />
+            <Image className="h-4 w-4 shrink-0 text-muted-foreground" />
           )}
-          <h2 className="font-semibold text-foreground text-sm">
+          <h2 className="font-semibold text-foreground text-sm truncate">
             {node.name || (isScan ? '3D Scan' : 'Guide Image')}
           </h2>
         </div>
         <button
-          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
+          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
           onClick={handleClose}
         >
           <X className="h-4 w-4" />

packages/viewer/src/components/renderers/guide/guide-renderer.tsx

@@ -1,9 +1,9 @@
 import { type GuideNode, useRegistry } from '@pascal-app/core'
+import { useLoader } from '@react-three/fiber'
 import { Suspense, useMemo, useRef } from 'react'
 import { DoubleSide, type Group, type Texture, TextureLoader } from 'three'
 import { float, texture } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { useLoader } from '@react-three/fiber'
 import { useAssetUrl } from '../../../hooks/use-asset-url'
 
 export const GuideRenderer = ({ node }: { node: GuideNode }) => {
@@ -13,11 +13,7 @@ export const GuideRenderer = ({ node }: { node: GuideNode }) => {
   const resolvedUrl = useAssetUrl(node.url)
 
   return (
-    <group
-      ref={ref}
-      position={node.position}
-      rotation={[0, node.rotation[1], 0]}
-    >
+    <group ref={ref} position={node.position} rotation={[0, node.rotation[1], 0]}>
       {resolvedUrl && (
         <Suspense>
           <GuidePlane url={resolvedUrl} scale={node.scale} opacity={node.opacity} />
@@ -54,8 +50,13 @@ const GuidePlane = ({ url, scale, opacity }: { url: string; scale: number; opaci
   }, [tex, scale, opacity])
 
   return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]} material={material}>
-      <planeGeometry args={[width, height]} />
+    <mesh
+      rotation={[-Math.PI / 2, 0, 0]}
+      material={material}
+      raycast={() => {}}
+      frustumCulled={false}
+    >
+      <planeGeometry args={[width, height]} boundingBox={null} boundingSphere={null} />
     </mesh>
   )
 }

packages/viewer/src/components/renderers/scan/scan-renderer.tsx

@@ -1,5 +1,4 @@
 import { type ScanNode, useRegistry } from '@pascal-app/core'
-import { Clone } from '@react-three/drei/core/Clone'
 import { Suspense, useMemo, useRef } from 'react'
 import type { Group, Material, Mesh } from 'three'
 import { useAssetUrl } from '../../../hooks/use-asset-url'
@@ -49,6 +48,14 @@ const ScanModel = ({ url, opacity }: { url: string; opacity: number }) => {
       if ((child as Mesh).isMesh) {
         const mesh = child as Mesh
 
+        // Disable raycasting
+        mesh.raycast = () => {}
+
+        // Exclude from bounding box calculations
+        mesh.geometry.boundingBox = null
+        mesh.geometry.boundingSphere = null
+        mesh.frustumCulled = false
+
         if (Array.isArray(mesh.material)) {
           mesh.material.forEach((material) => {
             updateMaterial(material)
@@ -60,5 +67,5 @@ const ScanModel = ({ url, opacity }: { url: string; opacity: number }) => {
     })
   }, [scene, opacity])
 
-  return <Clone object={scene} />
+  return <primitive object={scene} />
 }