Put explorePanel btn in the center

Author: scriptype

src/cms/server/public/app/explorePanel.js

@@ -86,12 +86,17 @@ const makeButtonsWork = (panel) => {
 }
 
 const makeDraggable = (element) => {
+  const rect = element.getBoundingClientRect()
+  const parentRect = element.parentElement.getBoundingClientRect()
+  const initialX = rect.left - parentRect.left
+  const initialY = rect.top - parentRect.top
+
   let offsetX = 0
   let offsetY = 0
-  let targetX = 0
-  let targetY = 0
-  let currentX = 0
-  let currentY = 0
+  let targetX = initialX
+  let targetY = initialY
+  let currentX = initialX
+  let currentY = initialY
   let animationId = null
   let isDragging = false
   const easing = 0.125
@@ -153,9 +158,9 @@ const makeCollapsible = (element) => {
 window.addEventListener('DOMContentLoaded', () => {
   const explorePanel = createDOMNodeFromHTML(template())
   makeButtonsWork(explorePanel)
-  makeDraggable(explorePanel)
   makeCollapsible(explorePanel)
 
   const container = query('#panels-container')
   container.appendChild(explorePanel)
-})
+  makeDraggable(explorePanel)
+})

src/cms/server/public/index.html

@@ -25,8 +25,8 @@
 
         .explore-panel {
             position: absolute;
-            top: 0;
-            left: 0;
+            top: 50%;
+            left: 50%;
             display: flex;
             flex-direction: column;
             gap: 0.4em;