Skip to content

Fix team card layout and assign keys to cards#14

Open
msoham123 wants to merge 2 commits intoskyline-emu:masterfrom
msoham123:overflow
Open

Fix team card layout and assign keys to cards#14
msoham123 wants to merge 2 commits intoskyline-emu:masterfrom
msoham123:overflow

Conversation

@msoham123
Copy link
Copy Markdown
Member

@msoham123 msoham123 commented Jan 3, 2023

Fixes the name overflowing on the longer named team card. Also fixes a react warning being thrown due to the absence of an unique key for each team member in the list.

</div>
<div className="flex flex-col flex-none items-start">
<div className="-mt-8 text-2xl font-inter text-stone-600 dark:text-zinc-300 text-left">{name}</div>
<div className="-mt-8 text-2xl font-inter text-stone-600 dark:text-zinc-300 text-left overflow-hidden lg:text-xl">{name}</div>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I was looking into trying to use ellipses when it overflowed but couldn't make it work, maybe you can?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I tried, but using tailwind's native truncate property didn't seem to work fully. https://stackoverflow.com/questions/53497656/tailwind-text-overflow-ellipsis

image

It truncates fine, but I can't seem to get ellipses at all for some reason. If you'd like, I can commit this here without the ellipses?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants