Repository: provectus/kafka-ui
Issue: Consumer overview: topic label padding looks weird
Labels: good first issue
scope/frontend
status/accepted
type/chore

<img width="653" alt="image" src="https://user-images.githubusercontent.com/1494347/180576596-28801e82-bde0-474e-b9c0-5f8ff1339327.png">


Issue comments:
Hi @Haarolean , I can try and fix the padding. 

- Is there any specific amount of padding we're looking at?
- Any other detail?

(participate in the spirit of Hacktoberfest)
@prateekvarma thank you.
Please use [this](https://www.figma.com/file/ZkvysdRUmt9p2PDNU3a9WU/Kafka-UI?node-id=117%3A2644) as a reference
@prateekvarma any luck?
@David-DB88 https://www.figma.com/file/ZkvysdRUmt9p2PDNU3a9WU/Kafka-UI?node-id=117%3A2644

Pull request review comments:
it is not a good practice to check the text value of a prop , if we want to do something with the size , we should for example pass a prop for `size` and it can several values lets say `large` `small` `medium` with normally typed in the prop `type: large | small |  medium` and choose the value of the text accordingly.

we should always make `typescript` help us rather than the opposite.
ok
you can do the check and put the values here directly.

 we don't have to put some values in the `theme` because of a some condition. it makes the `theme` larger and over complicates some styling logic

`size == 'small'? '16px' :  '24px';`
`title` props are not being used , we should remove them.
i removed table title styles from theme 
@Mgrdich removed title props 
```suggestion
            <TableHeaderCell colSpan={2} title="Topic"/>
            <TableHeaderCell title="Messages behind" />
```
remove all this stuff
Also you need to play with ToggleButton & TableKeyLink components in ListItem.
Also Important to update all the tables where we use same approach
done
done
it is not very user perspective to get it by the `data-testid` cause when a person reads the test they should be able to intuitively understand what should be tested. because it ships this attribute to production as well.

[article](https://betterprogramming.pub/why-you-should-avoid-testing-react-components-with-test-ids-ee50d20d37d2)
removed testID

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index 098a487081a..e2226f59813 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -14,7 +14,6 @@ import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import groupBy from 'lodash/groupBy';
 import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
   deleteConsumerGroup,
@@ -27,6 +26,7 @@ import { Dropdown } from 'components/common/Dropdown';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import { Action, ResourceType } from 'generated-sources';
 import { ActionDropdownItem } from 'components/common/ActionComponent';
+import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 
 import ListItem from './ListItem';
 
@@ -137,7 +137,6 @@ const Details: React.FC = () => {
       <Table isFullwidth>
         <thead>
           <tr>
-            <TableHeaderCell> </TableHeaderCell>
             <TableHeaderCell title="Topic" />
             <TableHeaderCell title="Messages behind" />
           </tr>
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.styled.ts b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.styled.ts
index 11c852b3632..358a45e0a6f 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.styled.ts
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.styled.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-export const ToggleButton = styled.td`
-  padding: 8px 8px 8px 16px !important;
-  width: 30px;
+export const FlexWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
index 313ad234098..7b1a61ae4eb 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ListItem.tsx
@@ -8,7 +8,7 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 
 import TopicContents from './TopicContents/TopicContents';
-import { ToggleButton } from './ListItem.styled';
+import { FlexWrapper } from './ListItem.styled';
 
 interface Props {
   clusterName: ClusterName;
@@ -30,14 +30,16 @@ const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
   return (
     <>
       <tr>
-        <ToggleButton>
-          <IconButtonWrapper onClick={() => setIsOpen(!isOpen)} aria-hidden>
-            <MessageToggleIcon isOpen={isOpen} />
-          </IconButtonWrapper>
-        </ToggleButton>
-        <TableKeyLink>
-          <Link to={clusterTopicPath(clusterName, name)}>{name}</Link>
-        </TableKeyLink>
+        <td>
+          <FlexWrapper>
+            <IconButtonWrapper onClick={() => setIsOpen(!isOpen)} aria-hidden>
+              <MessageToggleIcon isOpen={isOpen} />
+            </IconButtonWrapper>
+            <TableKeyLink>
+              <Link to={clusterTopicPath(clusterName, name)}>{name}</Link>
+            </TableKeyLink>
+          </FlexWrapper>
+        </td>
         <td>{getTotalMessagesBehind()}</td>
       </tr>
       {isOpen && <TopicContents consumers={consumers} />}
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
index 0ed5504e793..9e010a414f2 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx
@@ -64,7 +64,7 @@ describe('Details component', () => {
       expect(screen.getByText(groupId)).toBeInTheDocument();
 
       expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(screen.getAllByRole('columnheader').length).toEqual(3);
+      expect(screen.getAllByRole('columnheader').length).toEqual(2);
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx
index c4906e9209d..9cf79d02ded 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/ListItem.spec.tsx
@@ -40,7 +40,9 @@ describe('ListItem', () => {
   });
 
   it('should renders list item with topic content open', async () => {
-    await userEvent.click(screen.getAllByRole('cell')[0].children[0]);
+    await userEvent.click(
+      screen.getByRole('cell', { name: 'cluster1' }).children[0].children[0]
+    );
     expect(screen.getByText('Consumer ID')).toBeInTheDocument();
   });
 });
diff --git a/kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts b/kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts
index 77301021557..a2b0ece7242 100644
--- a/kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts
+++ b/kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts
@@ -18,6 +18,6 @@ const tableLinkMixin = css(
 `
 );
 
-export const TableKeyLink = styled.td`
+export const TableKeyLink = styled.div`
   ${tableLinkMixin}
 `;


Test patch: