I did not change any page layout
AI-generated summary
The issue involved a layout problem with the ‘Education’ user field in Discourse, where unintended CSS styles were applied due to a class name collision. yu_miao reported the problem, confirming it persisted even in safe mode yu_miao. JammyDodger identified that specific CSS rules on the .education class were causing the layout distortion, and noted the issue also occurred on their test site but only for ‘Education’. awesomerobot traced the conflict to the reuse of the .education class elsewhere in the codebase, suggesting a naming prefix to prevent collisions. A fix was implemented, renaming user field classes to use a prefix like .public-user-field__education awesomerobot. After updating Discourse, yu_miao confirmed the issue was resolved.
1 Like
Does this still occur in safe mode?
1 Like
Hmmm. Yes, so it is. It seems to be these lines on the div.education user field that seem to be the culprit. When they’re deselected in the inspector it comes good. Not sure what is adding them though.
This also happens on my test site:
But only for ‘Education’:
1 Like
That’s it ，“education” has some kind of magic 
thanks for the reply 
2 Likes
We use the education class elsewhere
So it seems this is a class collision issue. These user fields should have some kind of prefix to avoid this, so they’re .user-field-education or something.
3 Likes
I’ve just merged in a fix that will update the user field class names to get a prefix… so instead of
.education
it would be
.public-user-field__education
So the next time you update Discourse this issue should go away.
2 Likes
This topic was automatically closed after 7 hours. New replies are no longer allowed.