Summary

Switch entry, review, and comment header styling to Flexbox.

Review Request #14285 — Created Jan. 2, 2025 and updated Jan. 7, 2025, 9:53 a.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.1.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

The styling for review request entries (reviews, etc.) and comment
headers now use Flexbox, which helps us manage styles more consistently
and avoids some hacks and workarounds to get things to line up in mobile
and desktop modes correctly.

This is necessary for some in-progress work on user badges, which impact
the layout of this area.

Testing Done

Tested the styling for reviews, changes, and status updates, in both
expanded and collapsed mode.

Tested these on both mobile and desktop at various widths.

Tested with in-progress changes for user badges.

Checked alignment on the text to make sure everything lined up
correctly.

Commits

Summary	ID
Switch entry, review, and comment header styling to Flexbox. The styling for review request entries (reviews, etc.) and comment headers now use Flexbox, which helps us manage styles more consistently and avoids some hacks and workarounds to get things to line up in mobile and desktop modes correctly. This is necessary for some in-progress work on user badges, which impact the layout of this area.	19661a79685222d8527b2880e51eaa1abfd4c09b

Summary

Switch entry, review, and comment header styling to Flexbox.

The styling for review request entries (reviews, etc.) and comment headers now use Flexbox, which helps us manage styles more consistently and avoids some hacks and workarounds to get things to line up in mobile and desktop modes correctly. This is necessary for some in-progress work on user badges, which impact the layout of this area.

19661a79685222d8527b2880e51eaa1abfd4c09b

Files

Issues

Description	From	Last Updated
Can you switch this to #rb-ns-pages.base.on-shell-mobile-mode since .on-mobile-medium-screen-720 is deprecated? Or you can do #rb-ns-ui.screen.on-width-lte(720px, ...) if this really depends …	maubin	Jan. 7, 2025, 9:53 a.m.

flake8 passed.

JSHint passed.

Change Summary:

Tweaked spacing just a bit to give some breathing room when badges are added.

Commits:

	Summary	ID
	Switch entry, review, and comment header styling to Flexbox. The styling for review request entries (reviews, etc.) and comment headers now use Flexbox, which helps us manage styles more consistently and avoids some hacks and workarounds to get things to line up in mobile and desktop modes correctly. This is necessary for some in-progress work on user badges, which impact the layout of this area.	bc7c6dde755a03bf0c8d7916c44caed7d9063265
	Switch entry, review, and comment header styling to Flexbox. The styling for review request entries (reviews, etc.) and comment headers now use Flexbox, which helps us manage styles more consistently and avoids some hacks and workarounds to get things to line up in mobile and desktop modes correctly. This is necessary for some in-progress work on user badges, which impact the layout of this area.	19661a79685222d8527b2880e51eaa1abfd4c09b

Diff:

Revision 2 (+42 -34)

Show changes

reviewboard/static/rb/css/pages/reviews.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Fix it!

reviewboard/static/rb/css/pages/reviews.less (Diff revision 2)

An issue was opened. Show all issues

Can you switch this to #rb-ns-pages.base.on-shell-mobile-mode since .on-mobile-medium-screen-720 is deprecated? Or you can do #rb-ns-ui.screen.on-width-lte(720px, ...) if this really depends on the 720 pixel size.