diff --git a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx index bf36835c6438..46a8f48bf9cd 100644 --- a/apps/builder/app/builder/features/project-settings/section-marketplace.tsx +++ b/apps/builder/app/builder/features/project-settings/section-marketplace.tsx @@ -213,8 +213,8 @@ export const SectionMarketplace = () => { - - + + { loader={imageLoader} /> - - - - The optimal dimensions in marketplace are 600x315 px or larger - with a 1.91:1 aspect ratio. - - - - + + + The optimal dimensions in marketplace are 600x315 px or larger + with a 1.91:1 aspect ratio. + + + + + - + diff --git a/apps/builder/app/builder/shared/binding-popover.tsx b/apps/builder/app/builder/shared/binding-popover.tsx index c40b8d723f10..048b7443cb1c 100644 --- a/apps/builder/app/builder/shared/binding-popover.tsx +++ b/apps/builder/app/builder/shared/binding-popover.tsx @@ -271,6 +271,8 @@ const BindingButton = forwardRef< left: 0, boxSizing: "border-box", padding: 2, + // Because of the InputErrorsTooltip, we need to set zIndex to 1 (as InputErrorsTooltip needs an additional position relative wrapper) + zIndex: 1, transform: "translate(-50%, -50%) scale(1)", transition: "transform 60ms, opacity 0ms 60ms", // https://easings.net/#easeInOutSine diff --git a/packages/design-system/src/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx index 4d6652d542ea..8a1e539adb74 100644 --- a/packages/design-system/src/components/tooltip.tsx +++ b/packages/design-system/src/components/tooltip.tsx @@ -245,25 +245,42 @@ export const InputErrorsTooltip = ({ // Wrap the error tooltip with its own provider to avoid logic intersection with ordinary tooltips. // This is especially important for hover delays. // Here we ensure that hovering over the tooltip trigger after any input will not show the tooltip immediately. + // -- + // Additionally, we can't wrap the underlying Input with Tooltip because we are not rendering Tooltips in case of no errors. + // This causes a full re-render of the Input and loss of focus. + // Because of that, we are wrapping the Tooltip with the relative Box component and providing an invisible trigger for the Tooltip. return ( - + + + + {children} - + ); };