Language Card Compact Overflow

WilsontheWolf commented 1 year ago

Describe the bug

On the language card, when its compact, long language names (such as "Game Maker Language") overflow out of the card.

Expected behaviour

Should not overflow.

Screenshots / Live demo link

Live:

Screenshot:

Additional context

In the past, I remember this being wider. Maybe that would be a solution. Otherwise some kind of text cutoff would probably be best.

LokeshXs commented 1 year ago

can I work on this ^^^^

akshayaureatelabs commented 1 year ago

@WilsontheWolf @LokeshXs Hello,

To fix the issue of long language names overflowing out of the language card when it is in compact mode, you can try one of the following solutions:

Increase the width of the card: You mentioned that in the past, the language card was wider, so increasing the width of the card could help to avoid the overflow issue.
Use a text cutoff: You can also try using a text cutoff to truncate the long language names and show an ellipsis (...) at the end of the text to indicate that it has been cut off. This will ensure that the text stays within the card and does not overflow. You can add a tooltip or hover effect to show the full language name when a user hovers over the truncated text.
Use a smaller font size: Another solution is to reduce the font size of the language name when it is too long to fit within the card. However, this may not be an ideal solution as it can make the text hard to read for some users.

LokeshXs commented 1 year ago

@akshayaureatelabs, can this be fixed by some CSS like the word-wrap property?

@WilsontheWolf I can increase the default size of the card but if the user wants a wider card the width option can be exclusively passed. Like -https://github-readme-stats.vercel.app/api/top-langs/?username=WilsontheWolf&layout=compact&card_width=400

akshayaureatelabs commented 1 year ago

@akshayaureatelabs, can this be fixed by some CSS like the word-wrap property?

@WilsontheWolf I can increase the default size of the card but if the user wants a wider card the width option can be exclusively passed. Like -https://github-readme-stats.vercel.app/api/top-langs/?username=WilsontheWolf&layout=compact&card_width=400

@LokeshXs Yes you can!

rickstaa commented 1 year ago

For now, the best thing is to use the card_width option. However, feel free to open a pull request for me to review.

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=wilsonthewolf&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=wilsonthewolf&layout=compact&card_width=400)](https://github.com/anuraghazra/github-readme-stats)

Sasikumar00 commented 1 year ago

Or we can set the width of the "rect" relative to the "main-card-body". We can get the current width of the main-card-body and then set the "rect' width to be 5-10% more than that

ForsakenRei commented 11 months ago

I noticed the same thing when there is some longer names on the right side, currently I just manually set the card_width. If there is some dynamic adjustment to the card it will be great since I don't know if some day the ranking changed and I will need adjust it again or not.

https://github.com/anuraghazra/github-readme-stats/issues/2732#issuecomment-1596835371 This is exactly the way to go.

rickstaa commented 11 months ago

I noticed the same thing when there is some longer names on the right side, currently I just manually set the card_width. If there is some dynamic adjustment to the card it will be great since I don't know if some day the ranking changed and I will need adjust it again or not.

#2732 (comment) This is exactly the way to go.

Hey @ForsakenRei. To my knowledge, this issue has yet to be addressed. I think the second solution I opted in that comment would be the preferred one since it requires less code:

When card_width is specified, use this width while adhering to the current minimum card_width. The too-long language can then be truncated (i.e. Jupyter or ProgramingLang...).

@LokeshXs are you still working on this issue, or can I remove the assignment 🤔?

ForsakenRei commented 11 months ago

yes I know it's not implemented yet, though I thought the two bullet points combined is the solution, like if else conditions based on whether card_width is set or not and is it smaller than the default minimum card_width or not? I'm not a JS expert so I might understand the implementation wrong.

LokeshXs commented 11 months ago

Hi @rickstaa, Yes I am working on this issue, looks like I achieved the solution

Screenshot:

Live:

What I did is calculate the width of SVG in case of a compact layout

If the longest language name is overflowing the SVG, I changed the width so that the longest language name will be visible.
In case there is no language name overflowing, I keep it the same.

rickstaa commented 11 months ago

Hi @rickstaa, Yes I am working on this issue, looks like I achieved the solution

Screenshot:

Live:

What I did is calculate the width of SVG in case of a compact layout

If the longest language name is overflowing the SVG, I changed the width so that the longest language name will be visible.

In case there is no language name overflowing, I keep it the same.

Ah, amazing to hear that you managed to solve the problem! 🚀 My only concern with your current solution is that it overwrites the card_width value when a user sets it. Maybe use the ellipsis (i.e. ...) when the user has specified the card_width and otherwise enlarged the card?

LokeshXs commented 11 months ago

Yes it overwrites if the content gets out of the box. If we add an ellipse it would hide the percentage value. since its a important piece of info should we do it?

Another solution would be to add the tooltip to the language node and adding an ellipse when the content goes out.

@rickstaa

rickstaa commented 11 months ago

Yes, it overwrites if the content gets out of the box. If we add an ellipse, it would hide the percentage value. Since it's an essential piece of info, should we do it?

Another solution would be adding the tooltip to the language node and an ellipse when the content goes out.

@rickstaa

The proposed solution would display the long stat as Jupyter Note... 40%. Would this work? What do you think 🤔?

LokeshXs commented 11 months ago

Hi, @rickstaa ,

I have developed a solution for a text truncation problem, but it's not working properly when the user specifies the width of the text. Currently, I have set a fixed width for the text, and when it exceeds that width, it gets truncated with an ellipsis. However, I am unable to make the text width adjustable based on the width of SVG. I would appreciate some guidance and assistance with resolving this issue.

Live:

anuraghazra / github-readme-stats