From 9e28ffc995e55a7601dab068501460759d4ca550 Mon Sep 17 00:00:00 2001 From: Alexis Demetriou Date: Thu, 22 Aug 2024 13:30:52 +0300 Subject: [PATCH 1/4] Fixed overflow issue in consumer group names display --- .../common/NewTable/Table.styled.ts | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index 5db0ba806..f0b6f1732 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -153,24 +153,30 @@ export const Table = styled.table( vertical-align: middle; word-wrap: break-word; - & a { - color: ${table.td.color.normal}; - font-weight: 500; - max-width: 450px; - white-space: nowrap; + &:first-of-type { + max-width: 530px; overflow: hidden; text-overflow: ellipsis; - display: block; + white-space: nowrap; + + & a { + color: ${table.td.color.normal}; + font-weight: 500; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - &:hover { + &:hover { color: ${table.link.color.hover}; - } + } - &:active { + &:active { + color: ${table.link.color.active}; + } + &:button { color: ${table.link.color.active}; - } - &:button { - color: ${table.link.color.active}; + } } } From b12d10b44e9bfc8df5b0b35bbe7e49e86a9dfffc Mon Sep 17 00:00:00 2001 From: Alexis Demetriou Date: Wed, 28 Aug 2024 17:54:15 +0300 Subject: [PATCH 2/4] Removed max-width for the consumer group names --- frontend/src/components/common/NewTable/Table.styled.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index f0b6f1732..1b81f631c 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -154,7 +154,6 @@ export const Table = styled.table( word-wrap: break-word; &:first-of-type { - max-width: 530px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; From 7bc3aa0a280ccc27588be9dbc86a39770343824c Mon Sep 17 00:00:00 2001 From: Alexis Demetriou Date: Mon, 9 Sep 2024 09:32:11 +0300 Subject: [PATCH 3/4] IPD-1388 - Fixed overflow issue in consumer group names display --- frontend/src/components/common/NewTable/Table.styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index 1b81f631c..3e90c129d 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -157,6 +157,7 @@ export const Table = styled.table( overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + max-width: 150ch; & a { color: ${table.td.color.normal}; From ed29ed28e43c35e764f49651ce4868b32cf6d651 Mon Sep 17 00:00:00 2001 From: Alexis Demetriou Date: Mon, 16 Sep 2024 18:02:50 +0300 Subject: [PATCH 4/4] Fixed text overflow issue in table cells for long names using media --- .../common/NewTable/Table.styled.ts | 47 ++++++++++++------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/common/NewTable/Table.styled.ts b/frontend/src/components/common/NewTable/Table.styled.ts index 3e90c129d..26dfbb98a 100644 --- a/frontend/src/components/common/NewTable/Table.styled.ts +++ b/frontend/src/components/common/NewTable/Table.styled.ts @@ -153,32 +153,43 @@ export const Table = styled.table( vertical-align: middle; word-wrap: break-word; - &:first-of-type { + & a { + color: ${table.td.color.normal}; + font-weight: 500; + max-width: 150ch; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; - max-width: 150ch; + display: block; - & a { - color: ${table.td.color.normal}; - font-weight: 500; - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { + &:hover { color: ${table.link.color.hover}; - } + } - &:active { - color: ${table.link.color.active}; - } - &:button { + &:active { color: ${table.link.color.active}; - } } + &:button { + color: ${table.link.color.active}; + } + } + + @media (max-width: 1500px) { + & a { + max-width: 70ch; + } + } + @media (max-width: 1024px) { + & a { + max-width: 50ch; + } + } + + @media (max-width: 768px) { + & a { + max-width: 40ch; + } } } `