twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 21:50:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Blocklist table optimised for all viewports (#7618)

Browse Source 
## Description

- This PR fixes the issue #7549 
- Optimised blocktable for all viewports

## Changes - 

<img width="1113" alt="Screenshot 2024-10-12 at 5 11 11 PM"
src="https://github.com/user-attachments/assets/29d491da-5878-4c88-b50e-6ee6c43d5bec">



https://github.com/user-attachments/assets/d5fa063d-2819-4a9d-a9b2-e3ceefe65c8d

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Harshit Singh 2024-10-18 01:07:03 +05:30 committed by GitHub
parent c0e6fb6fdb
commit a45d3148ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx
View File

@ -1,11 +1,10 @@
import styled from '@emotion/styled';
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
type SettingsAccountsBlocklistTableProps = {
blocklist: BlocklistItem[];
@ -28,7 +27,10 @@ export const SettingsAccountsBlocklistTable = ({
<>
{blocklist.length > 0 && (
<StyledTable>
<TableRow>
<TableRow
gridAutoColumns="200px 1fr 20px"
mobileGridAutoColumns="120px 1fr 20px"
>
<TableHeader>Email/Domain</TableHeader>
<TableHeader>Added to blocklist</TableHeader>
<TableHeader></TableHeader>

12
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx
View File

@ -1,4 +1,4 @@
import { IconX } from 'twenty-ui';
import { IconX, OverflowingTextWithTooltip } from 'twenty-ui';
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
import { IconButton } from '@/ui/input/button/components/IconButton';
@ -16,8 +16,14 @@ export const SettingsAccountsBlocklistTableRow = ({
onRemove,
}: SettingsAccountsBlocklistTableRowProps) => {
return (
<TableRow key={blocklistItem.id}>
<TableCell>{blocklistItem.handle}</TableCell>
<TableRow
key={blocklistItem.id}
gridAutoColumns="200px 1fr 20px"
mobileGridAutoColumns="120px 1fr 20px"
>
<TableCell>
<OverflowingTextWithTooltip text={blocklistItem.handle} />
</TableCell>
<TableCell>
{blocklistItem.createdAt
? formatToHumanReadableDate(blocklistItem.createdAt)