diff --git a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx index 42707ba0b..f1da51631 100644 --- a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx +++ b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx @@ -203,7 +203,7 @@ export default function GlobalVariableModal({ password={false} placeholder="Choose a field for the variable..." id="apply-to-fields" - popoverWidth="520px" + popoverWidth="29rem" optionsPlaceholder="Fields" />
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx index b59f8a10d..4f9916bca 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx +++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx @@ -1,4 +1,5 @@ import ForwardedIconComponent from "@/components/common/genericIconComponent"; +import ShadTooltip from "@/components/common/shadTooltipComponent"; import { Badge } from "@/components/ui/badge"; import { Command, @@ -69,15 +70,21 @@ const CommandItemContent = ({ option, isSelected, optionButton, + nodeStyle, }: { option: string; isSelected: boolean; optionButton: (option: string) => ReactNode; + nodeStyle?: string; }) => (
- {option} + +
+ {option} +
+
{optionButton && optionButton(option)}
@@ -170,6 +177,8 @@ const CustomInputPopover = ({ const [isFocused, setIsFocused] = useState(false); const memoizedOptions = useMemo(() => new Set(options), [options]); + console.log(nodeStyle); + const PopoverContentInput = editNode ? PopoverContent : PopoverContentWithoutPortal; @@ -222,15 +231,21 @@ const CustomInputPopover = ({ ))}
) : selectedOption?.length > 0 ? ( - handleRemoveOption(selectedOption, e)} - variant={nodeStyle ? "emerald" : "secondary"} - className={cn( - editNode && "text-xs", - nodeStyle ? "rounded-[3px] px-1 font-mono" : "bg-muted", - )} - /> + +
+ handleRemoveOption(selectedOption, e)} + variant={nodeStyle ? "emerald" : "secondary"} + className={cn( + editNode && "text-xs", + nodeStyle + ? "max-w-60 rounded-[3px] px-1 font-mono" + : "bg-muted", + )} + /> +
+
) : null} {!selectedOption?.length && !selectedOptions?.length && ( @@ -304,6 +319,7 @@ const CustomInputPopover = ({ selectedOptions?.includes(option) } optionButton={optionButton} + nodeStyle={nodeStyle} /> ))} diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx index 23fba882d..5b4434107 100644 --- a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx +++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx @@ -90,7 +90,7 @@ export default function InputGlobalComponent({ return (