chore: improve panel position

Author: zouhangwithsweet

entrypoints/injected/App.tsx

@@ -1,6 +1,7 @@
 import { motion, useDragControls } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 
+import { roundTranslateValues } from '../utils/style'
 import { CodeArea } from './components/Code'
 import { Colors } from './components/Colors'
 import { Download } from './components/Download'
@@ -33,8 +34,12 @@ export default () => {
       dragPropagation={false}
       dragListener={false}
       dragControls={controls}
-      className={`fixed top-10 right-20 text-xs text-$color-text bg-$color-bg rounded border-1 border-$color-border border-solid shadow-md z-10 antialiased h-auto transition-width !font-['Inter'] js-fullscreen-prevent-event-capture ${minimized ? 'w-50' : 'w-80'} max-h-[calc(100vh-50px)] overflow-y-scroll scrollbar-hide select-none`}
+      className={`fubukicss-panel fixed top-10 right-20 text-xs text-$color-text bg-$color-bg rounded border-1 border-$color-border border-solid shadow-md z-10 antialiased h-auto transition-width !font-['Inter'] js-fullscreen-prevent-event-capture ${minimized ? 'w-50' : 'w-80'} max-h-[calc(100vh-50px)] overflow-y-scroll scrollbar-hide select-none`}
       tabIndex={-1}
+      onDragEnd={() => {
+        const dom = document.querySelector('.fubukicss-panel') as HTMLDivElement
+        roundTranslateValues(dom)
+      }}
     >
       <Header startDrag={startDrag} ref={header} minimized={minimized} onToggleSize={handleToggleSize} />
       <CodeArea minimized={minimized} />

entrypoints/utils/style.ts

@@ -0,0 +1,13 @@
+export function roundTranslateValues(element: HTMLDivElement) {
+  const transform = element.style.transform
+  if (!transform) return
+
+  const newTransform = transform.replace(
+    /(translate[XY])\s*\(\s*(-?\d+\.?\d*)/g,
+    (_, prop, value) => `${prop}(${Math.round(parseFloat(value))}`,
+  )
+
+  if (newTransform !== transform) {
+    element.style.transform = newTransform
+  }
+}