Skip to content
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

fix: avoid awkward overlaps of group cards with lots of members, long project names, and small cards #7915

Merged
merged 8 commits into from
Aug 19, 2024
Merged

fix: avoid awkward overlaps of group cards with lots of members, long project names, and small cards #7915

Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6893777
fix: add placeholder comment
thomasheartman Aug 19, 2024
6b205af
fix: remove comment
thomasheartman Aug 19, 2024
949bf8c
fix: align bottom row towards the end such that avatars are always ne…
thomasheartman Aug 19, 2024
538ffbc
fix: break long project names
thomasheartman Aug 19, 2024
9ca6798
fix: re-introduce single component
thomasheartman Aug 19, 2024
154a95d
fix: add some spacing
thomasheartman Aug 19, 2024
145c1ed
fix: wordwrap casing
thomasheartman Aug 19, 2024
112b554
fix: use word-break
thomasheartman Aug 19, 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
12 changes: 9 additions & 3 deletions frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,10 @@ const StyledTitleRow = styled(StyledRow)(() => ({
alignItems: 'flex-start',
}));

const StyledBottomRow = styled(StyledRow)(() => ({
const StyledBottomRow = styled(StyledRow)(({ theme }) => ({
marginTop: 'auto',
alignItems: 'flex-end',
gap: theme.spacing(1),
}));

const StyledHeaderTitle = styled('h2')(({ theme }) => ({
Expand Down Expand Up @@ -85,6 +87,10 @@ const InfoBadgeDescription = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
}));

const ProjectNameBadge = styled(Badge)({
wordwrap: 'anywhere',
Copy link
Contributor

Choose a reason for hiding this comment

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

I haven't seen this anywhere else in our codebase. How would it work with 'break-word'?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

looks like styled has some issues with the word-wrap property (wordWrap would render correctly as word-wrap, but linter told me the property was invalid; wordwrap was accepted by the linter, but rendered as wordwrap so it didn't work), so I'll go with word-break: break-word instead.

});

interface IGroupCardProps {
group: IGroup;
onEditUsers: (group: IGroup) => void;
Expand Down Expand Up @@ -150,7 +156,7 @@ export const GroupCard = ({
placement='bottom-end'
describeChild
>
<Badge
<ProjectNameBadge
onClick={(e) => {
e.preventDefault();
navigate(
Expand All @@ -161,7 +167,7 @@ export const GroupCard = ({
icon={<TopicOutlinedIcon />}
>
{project}
</Badge>
</ProjectNameBadge>
</Tooltip>
))}
elseShow={
Expand Down
Loading