RI-7244 -Edit-and-remove-buttons-are-not-aligned

redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx

@@ -2,36 +2,44 @@ import React from 'react'
 import { TextButton } from '@redis-ui/components'
 import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button'
 import { IconType } from 'uiSrc/components/base/icons'
+import { Row } from '../../layout/flex'
+import { FlexProps } from '../../layout/flex/flex.styles'
 
 export type ButtonProps = React.ComponentProps<typeof TextButton> & {
   icon?: IconType
   iconSide?: 'left' | 'right'
   loading?: boolean
   size?: 'small' | 'large' | 'medium'
+  justify?: FlexProps['justify']
 }
 export const EmptyButton = ({
   children,
   icon,
   iconSide = 'left',
   loading,
   size = 'small',
+  justify = 'center',
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <ButtonIcon
-      buttonSide="left"
-      icon={icon}
-      iconSide={iconSide}
-      loading={loading}
-      size={size}
-    />
-    {children}
-    <ButtonIcon
-      buttonSide="right"
-      icon={icon}
-      iconSide={iconSide}
-      loading={loading}
-      size={size}
-    />
+    <Row
+      justify={justify}
+    >  
+      <ButtonIcon
+        buttonSide="left"
+        icon={icon}
+        iconSide={iconSide}
+        loading={loading}
+        size={size}
+      />
+      {children}
+      <ButtonIcon
+        buttonSide="right"
+        icon={icon}
+        iconSide={iconSide}
+        loading={loading}
+        size={size}
+      />
+    </Row>
   </TextButton>
 )

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -619,6 +619,7 @@ const DatabasesListWrapper = (props: Props) => {
                   <div className="controlsPopoverContent">
                     <div>
                       <EmptyButton
+                        justify="start"
                         icon={EditIcon}
                         className="editInstanceBtn"
                         aria-label="Edit instance"