Fix topic names fitting in a table cell (#1812)

* Fixed tags width and added scroll to the table

* Dropdown position fixed

* Prop up=true moved directly to the table

* Scroll removed, table resized

* Unused divider removed

* Removed extra Divider import

Co-authored-by: k.morozov <k.morozov@ffin.ru>
This commit is contained in:
Kirill Morozov 2022-04-22 16:33:00 +03:00 committed by GitHub
parent 8eedd17283
commit db217e1605
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 4 deletions

View file

@ -13,6 +13,9 @@ exports[`Overview view matches snapshot 1`] = `
padding-left: 0.75em;
padding-right: 0.75em;
text-align: center;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.c0 {

View file

@ -12,6 +12,8 @@ exports[`Tasks view matches snapshot 1`] = `
padding: 8px 8px 8px 24px;
color: #171A1C;
vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
}
.c0 tbody > tr:hover {
@ -182,6 +184,8 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
padding: 8px 8px 8px 24px;
color: #171A1C;
vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
}
.c0 tbody > tr:hover {

View file

@ -6,7 +6,6 @@ import { Link, NavLink } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { deleteConnector } from 'redux/actions';
import Dropdown from 'components/common/Dropdown/Dropdown';
import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
import DropdownItem from 'components/common/Dropdown/DropdownItem';
import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
import { Tag } from 'components/common/Tag/Tag.styled';
@ -84,8 +83,7 @@ const ListItem: React.FC<ListItemProps> = ({
</td>
<td>
<div>
<Dropdown label={<VerticalElipsisIcon />} right>
<DropdownDivider />
<Dropdown label={<VerticalElipsisIcon />} right up>
<DropdownItem
onClick={() => setDeleteConnectorConfirmationVisible(true)}
danger

View file

@ -16,4 +16,5 @@ export const Tag = styled.p<Props>`
padding-left: 0.75em;
padding-right: 0.75em;
text-align: center;
width: max-content;
`;

View file

@ -14,6 +14,8 @@ export const Table = styled.table<Props>`
padding: 8px 8px 8px 24px;
color: ${({ theme }) => theme.table.td.color.normal};
vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
}
& tbody > tr {