WikiEducationFoundation / WikiEduDashboard

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

Fix: Resolves layout bug by setting a minimum height for icons #6014 #6022

Closed empty-codes closed 3 weeks ago

empty-codes commented 3 weeks ago

What this PR does

Fixes Issue #6014.

To address the misalignment of the "Assessment tools" icons in the "Articles Edited" table, I added a new class article-diff-icons to the containing the icons. This ensures the cell maintains a consistent minimum width that accommodates both icons and the padding without disrupting the table layout across different screen sizes.

Calculation Details: The width requirement was calculated based on the icons' sizes and padding:

Icon width: Each icon is 48px by 48px, and there are two icons, so the total icon width is 96px. Horizontal padding: With 24px padding on both the left and right, this adds an additional 48px.

Minimum width for td: 96px (icons) + 48px (padding) = 144px.

Setting this as the min-width ensures the icons remain aligned, preventing layout disruption even with long article titles or varying viewport sizes.

This is the page before i made any changes:

https://github.com/user-attachments/assets/b18f51e3-a6fc-4783-8f58-9dae4ec88c55

After i set the min-width:

https://github.com/user-attachments/assets/a96f89f7-f749-4dce-9942-03ca181c66e1