diff --git a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts b/kafka-ui-react-app/src/components/Topics/List/List.styled.ts index c8d4a14533..95214624d3 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.styled.ts +++ b/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; `; diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx index 6c4ec05b57..334ff6a917 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx @@ -185,6 +185,8 @@ const List: React.FC = ({ 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 = ({ return ( <> - {!internal && !isReadOnly && hovered ? ( -
+
+ {!isHidden && ( } right> {cleanUpPolicy === CleanUpPolicy.DELETE && ( @@ -223,8 +225,8 @@ const List: React.FC = ({ Recreate Topic -
- ) : null} + )} +
setDeleteTopicConfirmationVisible(false)}