Need to change the position of the panels

[Rikin_18_17_02]

I can edit the position of the panels but it is not perfect for the y of position is gone and show like this one

how can I fix it?

here is the code for the editing the panels

 const handleMouseDownDocument = (event: { clientX: number; clientY: number }) => {
      drawingLine = false;
      scene.remove(measurementLabels[lineId]);
      if (line) {
        scene.remove(line);
      }

      if (clickOccurred) {
        clickOccurred = false;
        return;
      }

      const intersect: any = raycaster.intersectObjects(shapeMeshes, true);

      const deleteIntersect: any = raycaster.intersectObjects(deleteIcons, true);
      const panelsIntersect: any = raycaster.intersectObjects(panels, true);

      if (deleteIntersect.length > 0) {
        if (mode === "Create mode") return;
        console.log(deleteIntersect, axisHelper, "deleteIntersect");
        const object = deleteIntersect[0].object.parent;
        const findIndex = axisHelper.children.findIndex((ele) => ele === object);

        console.log(findIndex, "findIndex");
        const deleteIndex = axisHelper.children[findIndex + 1];
        axisHelper.remove(deleteIndex);
        axisHelper.remove(object);
        // onDeleteIconClick(object);
        // console.log(object, deleteIntersect, "hello");
        // axisHelper.remove(object); 
        // scene.remove(ob)
        // panelPlacementPopup(intersect[0].faceIndex, adjustedPoint);
        return;
      }

      if (panelsIntersect?.length > 0) {
        dragControls.current = new DragControls(panels, camera, renderer.domElement);

        return;
      }

      if (intersect.length > 0) {
        if (mode === t("Create mode")) return;
        const surfaceNormal = intersect[0].face.normal;
        const offsetDistance = 0.1; // Adjust this value as needed
        const adjustedPoint = intersect[0].point
          .clone()
          .add(surfaceNormal.clone().multiplyScalar(offsetDistance));
        panelPlacementPopup(intersect[0]?.object?.userData?.index, adjustedPoint);
        mode === t("Edit mode");

        if (!document.querySelector(".radio-container")) {
          createRadioContainer();
        }
        return;
      }

      if (mode === t("Edit mode")) {
        const dragablePoints = [...polygons.flat(2), ...points];
        dragControls.current = new DragControls(dragablePoints, camera, renderer.domElement);
        return;
      }
      const intersects: any = getIntersections(event);

      if (intersects?.length > 0 && mode === t("Create mode")) {
        const clickPoint = intersects[0].point;
        const surfaceNormal = intersects[0].face.normal;
        const offsetDistance = 0.1; // Adjust this value as needed
        const adjustedPoint = clickPoint
          .clone()
          .add(surfaceNormal.clone().multiplyScalar(offsetDistance));

        const intersect = raycaster.intersectObjects(points, true);

        if (intersect.length > 0) {
          const clickedPoint = intersect[0].object;
          const clickedPointIndex = points.indexOf(clickedPoint);
          const pointsPosition = points.map((point: { position: any }) => point.position);
          if (clickedPointIndex === 0 && pointsPosition.length > 2) {
            const pointsWithMidpoints = addPointBetweenConsecutivePoints(points);
            polygons.push(pointsWithMidpoints);
            const dragablePoints = [...polygons.flat(2)];

            dragControls.current = new DragControls(dragablePoints, camera, renderer.domElement);
            clearPoints();
            handleModeChange(t("Edit mode"));
            createModeRadio.checked = false;
            editModeRadio.checked = true;
            updateLineGeometry();
            calculateAndShowPopup(polygons);
            dispatch(
              ProjectActions.updateProject({
                threeDObjDetails: {
                  createdLines: [],
                  createdPoints: polygons.map((ele: any) =>
                    ele.map((point: any) => point.position),
                  ),
                  createdLineLoops: {},
                },
              }),
            );
            return;
          }

          return;
        }

        createSpherePointWithStroke(adjustedPoint, 0.2, 0xffffff);
        if (!drawingLine) {
          const points = [];
          points.push(intersects[0].point);
          points.push(intersects[0].point.clone());
          const geometry = new THREE.BufferGeometry().setFromPoints(points);
          line = new THREE.Line(
            geometry,
            new THREE.LineBasicMaterial({
              color: 0x22d94a,
              linewidth: 3,
              depthTest: false,
              transparent: false,
              opacity: 1,
            }),
          );
          line.frustumCulled = false;
          scene.add(line);
          const distanceLabel = document.createElement("div");
          distanceLabel.className = "measurementLabel";
          distanceLabel.style.cssText =
            "font-weight: bold; color: #fff; border-radius: 10px; padding: 3px 7px; background: rgba(0, 0, 0, 0.60); z-index: 999999;";

          const measurementLabel = new CSS2DObject(distanceLabel);
          measurementLabel.position.copy(intersects[0].point);
          measurementLabels[lineId] = measurementLabel;
          scene.add(measurementLabels[lineId]);
          drawingLine = true;
        }
      }
    };