"Staff Color" post notice CSS improvements

AI-generated summary

A discussion on improving the CSS for the “Staff Color” post notice is underway. MarcP identified issues on mobile and desktop versions, proposing changes to add margins and padding to align the staff color block with the username. The suggested desktop changes include adding margin-left: 8px and on mobile, adding padding-top: 1em and padding-left: 1em. MarcP confirmed the issue exists on meta and created a PR to address it.

However, awesomerobot expressed concerns about preserving the text alignment and post width, suggesting that the indent shift affects the left alignment and makes the post content narrower. MarcP then updated the changes, modifying the colors for better clarity, and shared the revised version. chapoi and awesomerobot both approved the revised changes, which are now available in the PR: https://github.com/discourse/discourse/pull/17365.

I noticed on mobile staff color on a post didn’t had margins. Also made some small improvements on desktop version.

I am happy to do a PR but I’m not really sure where to find desktop/mobile CSS.

Made the following changes:

desktop

.moderator .regular>.cooked {
    margin-left: 8px;
}

mobile

.moderator .regular>.cooked {
    padding-top: 1em;
    padding-left: 1em;
}

old vs new

On desktop, just aligned start of the block with the username as it seemed more pleasing to the eye. (rounded corners are local, I removed that from the code above but will add them in the template I wrote asap)

And on mobile, fixed paddings to make text centered


3 Likes

Can this be reproduced on meta? Can a mod add ‘staff color’ to this post?

EDIT: Can confirm the issue appears to be on meta too here & here to force mobile version (refresh after clicking to load mobile)

This is my first PR to core, please check if it’s according to standards. But this PR should make this smoother:

https://github.com/discourse/discourse/pull/17365

3 Likes

I agree that the alignment of the box isn’t ideal, but I’d really like to preserve the text alignment and post width if possible… the indent shifts that left alignment, and also makes the post content more narrow than other posts

3 Likes

I agree with your opinion.

How about example below. Changed the colors to make the details more clear for testing purposes.

https://github.com/discourse/discourse/pull/17365/commits/83b9d70b21da781b040ae388ee452100f1036775

1 Like

That looks nice to me. @awesomerobot ?

2 Likes

yep, that alleviates my concerns — thanks @MarcP!

1 Like