Fix Table Text Got Truncated in Small Screen Issue #9906
Conversation
|
Please include screenshots for UI change. Could you please include before and after changes? |
|
@erdembayar Please see the screenshot, user can scroll left and right to see the full text after css change. |
|
@ryuyu, haven't we been flagged for horizontal scrollbars in the past? |
|
I believe the previous flags were for horizontal scroll bars for entire page. |
src/NuGetGallery/Content/Site.css
Outdated
| @@ -1726,3 +1726,15 @@ img.contributors-contributor-avatar { | |||
| font-size: 1.1em; | |||
| padding: 5px 15px 5px 15px; | |||
| } | |||
| .container.page-statistics-overview td { | |||
There was a problem hiding this comment.
We have both a less and css file. Should we update the .less file instead of the css file in this case?
On other day I saw @martinrrm is making changes in less file generating the css changes from it.
There was a problem hiding this comment.
@erdembayar Just made the change, move the css from site.css to less file. Thank you!
There was a problem hiding this comment.
I think we still need to generate .css change from .less file and check-in both into our code repository.
There was a problem hiding this comment.
@martinrrm could you please confirm if above is correct process?
There was a problem hiding this comment.
@Goodyear2017 For changes in styles, we change the .less file and then update the css with grunt. We have some docs on how to update those files here https://github.com/NuGet/NuGetGallery/blob/main/docs/Frontend.md, let me know if you have questions. Thanks
|
@agr @ryuyu @erdembayar Do we want to add horizontal scrolls to each row of the table? I'm not sure if that is the best approach, we could add one horizontal scroll to the table and make the table columns the size of the text, this could make some columns not visible unless scrolling to the side. |
|
@martinrrm We have a table on our site scroll the whole table in small screen, the accessibility team approved it. |
|
I will close this PR and create another one. |
Change statistics table css to fix text truncated issue.
Bug link:
https://devdiv.visualstudio.com/DevDiv/_queries/edit/?tempQueryId=86f20051-1835-446b-b283-b35a28cb6618&id=1980703
https://devdiv.visualstudio.com/DevDiv/_queries/edit/?tempQueryId=86f20051-1835-446b-b283-b35a28cb6618&id=1980707