fix(ui): fix color picker (#1008)

motion-canvas · Mar 21, 2024 · dfc2dae · dfc2dae
1 parent d79af91
commit dfc2dae
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/ui/src/components/controls/ColorInput.tsx b/packages/ui/src/components/controls/ColorInput.tsx
@@ -4,6 +4,7 @@ import {useRef, useState} from 'preact/hooks';
 import {useReducedMotion} from '../../hooks';
 import {useClickOutside} from '../../hooks/useClickOutside';
 import {shake} from '../animations';
+import tabsStyles from '../tabs/Tabs.module.scss';
 import {ColorPicker} from './ColorPicker';
 import {ColorPreview} from './ColorPreview';
 import styles from './Controls.module.scss';
@@ -54,8 +55,8 @@ export function ColorInput({value, onChange}: ColorInputProps) {
           }}
           onClick={event => {
             const buttonRect = event.currentTarget.getBoundingClientRect();
-            const paneRect = document
-              .getElementById('settings-pane')
+            const paneRect = event.currentTarget
+              .closest(`.${tabsStyles.pane}`)
               .getBoundingClientRect();
             setPosition({
               x: paneRect.right + 2 + 12, // 2px seperator, 12px padding