"Staff Color" post notice CSS improvements

UX
1

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)

image
image1536×230 16.4 KB

image
image1546×310 22.2 KB

And on mobile, fixed paddings to make text centered

image
image1125×435 81.7 KB

image
image1125×475 83.6 KB

3 Likes
2

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:

3 Likes
4

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

image(1)
image(1)1536×230 18.1 KB

3 Likes
5

I agree with your opinion.

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

image
image766×262 14.6 KB

1 Like
6

That looks nice to me. @awesomerobot ?

2 Likes
7

yep, that alleviates my concerns — thanks @MarcP!

1 Like