Skip to content

FE: CG: Fix names display overflow issue #541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

FE: CG: Fix names display overflow issue #541

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e28ffc
Fixed overflow issue in consumer group names display
AlexisD02 Aug 22, 2024
b12d10b
Removed max-width for the consumer group names
AlexisD02 Aug 28, 2024
7bc3aa0
IPD-1388 - Fixed overflow issue in consumer group names display
AlexisD02 Sep 9, 2024
ed29ed2
Fixed text overflow issue in table cells for long names using media
AlexisD02 Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion frontend/src/components/common/NewTable/Table.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const Table = styled.table(
& a {
color: ${table.td.color.normal};
font-weight: 500;
max-width: 450px;
max-width: 150ch;
Copy link
Member

@Haarolean Haarolean Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as far as I can see we do not use ch anywhere yet and not sure how introducing these is legit. @Mgrdich ideas?

Copy link
Contributor

@Mgrdich Mgrdich Jan 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i am not sure about the ch

While the ch unit works as an exact measurement for monospaced / fixed width fonts like Courier, it can be unpredictable with proportional fonts like Arial

Copy link
Member

@Haarolean Haarolean Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AlexisD02 hey, can you elaborate?

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -172,7 +172,24 @@ export const Table = styled.table(
&: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;
}
}
}
`
Expand Down