WikiEducationFoundation / WikiEduDashboard

Wiki Education Foundation's Wikipedia course dashboard system
https://dashboard.wikiedu.org
MIT License
392 stars 631 forks source link

layout bug on Articles Edited table #6014

Open ragesoss opened 3 weeks ago

ragesoss commented 3 weeks ago

On at least one page, the two "Assessment tools" icons are misaligned and the table spacing is disrupted.

You can see the bug currently on this course page: https://dashboard.wikiedu.org/courses/University_of_Michigan-Dearborn/Environmental_Politics_(Fall_2024)/articles/edited?

icon spacing

It is being triggered by long article title (Assistant Secretary of State for Oceans and International Environmental and Scientific Affairs) present on the page.

Any number of quick hacks could fix this issue (including reducing the padding on either of the icons from 24px to 23px), but an ideal solution would address the root cause without arbitrarily adjusting the styling in a way that affects other pages.

empty-codes commented 3 weeks ago

Would like to take a look at this! @ragesoss

My findings:

The issue with misaligned "Assessment tools" icons is not solely due to long article titles but rather the window size. I tested other course pages where, at full screen and default window dimensions, the icons appeared aligned correctly. However, upon resizing the window, similar misalignment occurred.

I don't know if my fix classifies as a quick hack / an actual solution but it solves the bug for now.

I explained more in the PR.

Thanks🫡