diff --git a/src/components/OutputsTable/ScenarioEditor.tsx b/src/components/OutputsTable/ScenarioEditor.tsx index fd5af5b..61c380a 100644 --- a/src/components/OutputsTable/ScenarioEditor.tsx +++ b/src/components/OutputsTable/ScenarioEditor.tsx @@ -21,6 +21,7 @@ export default function ScenarioEditor({ const savedValues = scenario.variableValues as Record; const utils = api.useContext(); const [isDragTarget, setIsDragTarget] = useState(false); + const [variableInputHovered, setVariableInputHovered] = useState(false); const [values, setValues] = useState>(savedValues); @@ -72,7 +73,7 @@ export default function ScenarioEditor({ pr={cellPadding.x} py={cellPadding.y} height="100%" - draggable + draggable={!variableInputHovered} onDragStart={(e) => { e.dataTransfer.setData("text/plain", scenario.id); e.currentTarget.style.opacity = "0.4"; @@ -154,6 +155,8 @@ export default function ScenarioEditor({ borderColor={hasChanged ? "blue.300" : "transparent"} _hover={{ borderColor: "gray.300" }} _focus={{ borderColor: "blue.500", outline: "none", bg: "white" }} + onMouseEnter={() => setVariableInputHovered(true)} + onMouseLeave={() => setVariableInputHovered(false)} /> ); diff --git a/src/components/OutputsTable/VariantHeader.tsx b/src/components/OutputsTable/VariantHeader.tsx index 6fb923e..a14dbb8 100644 --- a/src/components/OutputsTable/VariantHeader.tsx +++ b/src/components/OutputsTable/VariantHeader.tsx @@ -11,6 +11,7 @@ import AutoResizeTextArea from "../AutoResizeTextArea"; export default function VariantHeader(props: { variant: PromptVariant }) { const utils = api.useContext(); const [isDragTarget, setIsDragTarget] = useState(false); + const [isInputHovered, setIsInputHovered] = useState(false); const [label, setLabel] = useState(props.variant.label); const updateMutation = api.promptVariants.update.useMutation(); @@ -53,7 +54,7 @@ export default function VariantHeader(props: { variant: PromptVariant }) { spacing={4} alignItems="center" minH={headerMinHeight} - draggable + draggable={!isInputHovered} onDragStart={(e) => { e.dataTransfer.setData("text/plain", props.variant.id); e.currentTarget.style.opacity = "0.4"; @@ -91,6 +92,8 @@ export default function VariantHeader(props: { variant: PromptVariant }) { _focus={{ borderColor: "blue.500", outline: "none" }} flex={1} px={cellPadding.x} + onMouseEnter={() => setIsInputHovered(true)} + onMouseLeave={() => setIsInputHovered(false)} />