fix(bugs): enhancements and bug fixes - more (#4043)

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -107,6 +107,12 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
     api.handleToolOptionChange(toolName, optionName, newValue);
   };
 
+  useEffect(() => {
+    return () => {
+      api.handleToolSelect(null);
+    };
+  }, []);
+
   return (
     <ToolboxUI
       {...props}

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -46,38 +46,20 @@ function ToolboxUI(props) {
                   key={id}
                   className={classnames({
                     [toolClasses]: true,
-                    'flex flex-col items-center justify-center': true,
+                    'border-secondary-light flex flex-col items-center justify-center rounded-md border':
+                      true,
                   })}
                 >
-                  {componentProps.disabled ? (
-                    <Tooltip
-                      position="bottom"
-                      content={componentProps.label}
-                      secondaryContent={componentProps.disabledText}
-                    >
-                      <div className="bg-black">
-                        <Component
-                          {...componentProps}
-                          {...props}
-                          id={id}
-                          servicesManager={servicesManager}
-                          onInteraction={onInteraction}
-                          size="toolbox"
-                        />
-                      </div>
-                    </Tooltip>
-                  ) : (
-                    <div className="bg-black">
-                      <Component
-                        {...componentProps}
-                        {...props}
-                        id={id}
-                        servicesManager={servicesManager}
-                        onInteraction={onInteraction}
-                        size="toolbox"
-                      />
-                    </div>
-                  )}
+                  <div className="flex rounded-md bg-black">
+                    <Component
+                      {...componentProps}
+                      {...props}
+                      id={id}
+                      servicesManager={servicesManager}
+                      onInteraction={onInteraction}
+                      size="toolbox"
+                    />
+                  </div>
                 </div>
               );
             })}
@@ -90,7 +72,16 @@ function ToolboxUI(props) {
     );
   };
 
-  return useCollapsedPanel ? <PanelSection title={title}>{render()}</PanelSection> : render();
+  return useCollapsedPanel ? (
+    <PanelSection
+      childrenClassName="flex-shrink-0"
+      title={title}
+    >
+      {render()}
+    </PanelSection>
+  ) : (
+    render()
+  );
 }
 
 export { ToolboxUI };