Fix dropdown jump effect bug on mouse over in topics list (#1875)

* fix dropdown jump effect bug on mouse over in topics list

* fix isHidden condition

Author: simonyandev

kafka-ui-react-app/src/components/Topics/List/List.styled.ts

@@ -24,4 +24,5 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
 
 export const ActionsTd = styled(Td)`
   overflow: visible;
+  width: 50px;
 `;

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -185,6 +185,8 @@ const List: React.FC<TopicsListProps> = ({
         setRecreateTopicConfirmationVisible,
       ] = React.useState(false);
 
+      const isHidden = internal || isReadOnly || !hovered;
+
       const deleteTopicHandler = React.useCallback(() => {
         deleteTopic(clusterName, name);
       }, [name]);
@@ -200,8 +202,8 @@ const List: React.FC<TopicsListProps> = ({
 
       return (
         <>
-          {!internal && !isReadOnly && hovered ? (
-            <div className="has-text-right">
+          <div className="has-text-right">
+            {!isHidden && (
               <Dropdown label={<VerticalElipsisIcon />} right>
                 {cleanUpPolicy === CleanUpPolicy.DELETE && (
                   <DropdownItem onClick={clearTopicMessagesHandler} danger>
@@ -223,8 +225,8 @@ const List: React.FC<TopicsListProps> = ({
                   Recreate Topic
                 </DropdownItem>
               </Dropdown>
-            </div>
-          ) : null}
+            )}
+          </div>
           <ConfirmationModal
             isOpen={isDeleteTopicConfirmationVisible}
             onCancel={() => setDeleteTopicConfirmationVisible(false)}