diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx index 4c558f3cc2..aaedf9deb9 100644 --- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx +++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx @@ -18,6 +18,7 @@ export const ConfigHandle = ({ showHandle, componentType, visibility, + subContainerIndex, }) => { const shouldFreeze = useStore((state) => state.getShouldFreeze()); const componentName = useStore((state) => state.getComponentDefinition(id)?.component?.name || '', shallow); @@ -40,10 +41,12 @@ export const ConfigHandle = ({ const anyComponentHovered = state.getHoveredComponentForGrid() !== '' || state.hoveredComponentBoundaryId !== ''; // If one component is hovered and one is selected, show the handle for the hovered component return ( - isWidgetHovered || - (showHandle && (!isMultipleComponentsSelected || (isModal && isModalOpen)) && !anyComponentHovered) + (subContainerIndex === 0 || subContainerIndex === null) && + (isWidgetHovered || + (showHandle && (!isMultipleComponentsSelected || (isModal && isModalOpen)) && !anyComponentHovered)) ); }, shallow); + let height = visibility === false ? 10 : widgetHeight; return ( diff --git a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx index 0f1cb3359f..0384d4cc6e 100644 --- a/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx +++ b/frontend/src/AppBuilder/AppCanvas/WidgetWrapper.jsx @@ -91,6 +91,7 @@ const WidgetWrapper = memo( showHandle={isWidgetActive} componentType={componentType} visibility={visibility} + subContainerIndex={subContainerIndex} /> )} { + // Fix for "visibility is not defined" in production because there's a naming conflict in the code. + // The issue is in the exposedVariables object where we had both a function named visibility and a property isVisible that depends on the state variable with the same name. + const exposedVariables = { + isVisible: visibility, + isDisabled: disable, + }; + setExposedVariables(exposedVariables); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const setInputValue = (value) => { setValue(value); setExposedVariable('value', value); diff --git a/frontend/src/Editor/WidgetManager/configs/listview.js b/frontend/src/Editor/WidgetManager/configs/listview.js index 25da8f73c6..86825142eb 100644 --- a/frontend/src/Editor/WidgetManager/configs/listview.js +++ b/frontend/src/Editor/WidgetManager/configs/listview.js @@ -13,6 +13,7 @@ export const listviewConfig = { top: 15, left: 3, height: 100, + width: 7, }, properties: ['source'], accessorKey: 'imageURL', diff --git a/frontend/src/Editor/WidgetManager/configs/tabs.js b/frontend/src/Editor/WidgetManager/configs/tabs.js index a397979a3e..0ed1e2a320 100644 --- a/frontend/src/Editor/WidgetManager/configs/tabs.js +++ b/frontend/src/Editor/WidgetManager/configs/tabs.js @@ -13,6 +13,7 @@ export const tabsConfig = { top: 60, left: 17, height: 100, + width: 7, }, tab: 0, properties: ['source'], diff --git a/frontend/src/_ui/Label.jsx b/frontend/src/_ui/Label.jsx index 721ac05203..443f4ddc6e 100644 --- a/frontend/src/_ui/Label.jsx +++ b/frontend/src/_ui/Label.jsx @@ -13,7 +13,7 @@ function Label({ label, width, labelRef, color, defaultAlignment, direction, aut justifyContent: direction == 'right' ? 'flex-end' : 'flex-start', fontSize: '12px', height: defaultAlignment === 'top' && '20px', - overflow: 'hidden', + overflow: auto ? 'visible' : 'hidden', }} >