Summary

Fix the header above reviews/replies and make it a new component.

Review Request #14971 — Created March 27, 2026 and submitted April 2, 2026, 11:16 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.1.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Instead of making the situation worse, this change introduces a new
rb-c-discussion-header component that can be used in each of these
areas. It's responsible for showing the author information or title, the
timestamp, and an optional avatar and "new updates" icon.

This can also be put in compact mode, which places the timestamp below
the name. Replies enable this and avatars, whereas the review headers do
not.

An improved mobile display now uses the compact mode for all cases.
Previously, the timestamp remained on the right-hand side of the title,
which left little room for content.

A Storybook story has been added to help document and maintain this
component.

Testing Done

Tested this in mobile and desktop modes on all review request entry
boxes and in replies (published, existing draft, and new draft).

Tested in light and dark modes.

All Python and JavaScript unit tests pass.

Commits

Summary	ID
Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. An improved mobile display now uses the compact mode for all cases. Previously, the timestamp remained on the right-hand side of the title, which left little room for content. A Storybook story has been added to help document and maintain this component.	146ca9137f142ff9d9db1b399848b9137d07ab0d

Summary

Fix the header above reviews/replies and make it a new component.

The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. An improved mobile display now uses the compact mode for all cases. Previously, the timestamp remained on the right-hand side of the title, which left little room for content. A Storybook story has been added to help document and maintain this component.

146ca9137f142ff9d9db1b399848b9137d07ab0d

Files

Issues

Description	From	Last Updated
Looks like reviewboard/static/rb/js/reviewRequestPage/views/tests/baseStatusUpdatesEntryViewTests.es6.js also needs to be updated for this change.	david	March 31, 2026, 7:46 a.m.
Typo: area-label -> aria-label	david	March 27, 2026, 9:30 p.m.
header-details and summary are no longer used at all in templates/reviews/entries/base.html (and I don't see it elsewhere in the codebase). …	david	March 27, 2026, 9:35 p.m.
__title is a grid child, so this property does nothing.	david	March 27, 2026, 9:35 p.m.
Do we not need to pass timestamp in the way that we were doing before?	david	March 27, 2026, 9:35 p.m.
Now that this is fully removed, I see that it's removing the responsive rules that switched to vertical stacking. Can …	david	March 31, 2026, 8:38 a.m.
Probably should be typed as HTMLElement \| null	david	April 2, 2026, 6:30 a.m.
Can you double check the spacing with drafts?	david	April 2, 2026, 6:33 a.m.

flake8 passed.

JSHint passed.

docs/stories/components/reviews/discussion-header.stories.ts (Diff revision 1)
The issue has been resolved. Show all issues
```
Typo: area-label -> aria-label
```

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

The issue has been resolved. Show all issues

header-details and summary are no longer used at all in templates/reviews/entries/base.html (and I don't see it elsewhere in the codebase). This gap doesn't seem to make sense, and in fact we might want to just remove this CSS entirely now.

chipx86

March 27, 2026, 9:38 p.m.

This was part of the original change that led to this work. I had code in my stash to remove all this that just got missed.

reviewboard/static/rb/css/ui/discussion-header.less (Diff revision 1)
The issue has been resolved. Show all issues
```
__title is a grid child, so this property does nothing.
```

reviewboard/templates/reviews/review_reply.html (Diff revision 1)

The issue has been resolved. Show all issues

Do we not need to pass timestamp in the way that we were doing before?

chipx86

March 27, 2026, 9:38 p.m.

With timestamp as timestamp? No, I'm not entirely sure why we had that. blocktrans strings will make use of existing variables as long as they're not any more simple than a bare local variable reference.

Change Summary:


Removed unused styles.
area-label -> aria-label.

Commits:

	Summary	ID
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. A Storybook story has been added to help document and maintain this component.	10542b882656cc7f9ffee23b3a4f9ad239290d8f
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. A Storybook story has been added to help document and maintain this component.	79e8306c69a17df48ad9aa58c737e23f8c5ce1d1

Diff:

Revision 2 (+842 -194)

Show changes

	docs/stories/components/reviews/discussion-header.stories.ts
	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/discussion-header.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewReplyEditorView.es6.js
	reviewboard/templates/reviews/review_reply.html
	reviewboard/templates/reviews/entries/base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

The issue has been resolved. Show all issues

Looks like reviewboard/static/rb/js/reviewRequestPage/views/tests/baseStatusUpdatesEntryViewTests.es6.js also needs to be updated for this change.

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

The issue has been resolved. Show all issues

Now that this is fully removed, I see that it's removing the responsive rules that switched to vertical stacking. Can you test the header on mobile?

chipx86

March 31, 2026, 7:50 a.m.

Works as well as it did before with the new grid-based layout, but there's room for improvement.

Change Summary:


Added an improved mobile display, reusing the compact mode.
Removed the extra gap when there's no status icon.

Description:

		The work on user badges regressed some of the display of the header area
		at the top of reviews and in comments. This wasn't helped by the fact
		that this is some of the oldest CSS in the codebases, and it's a huge
		rats nest. Fixing this meant fixing it in multiple places and then
		dealing with overrides.

		Instead of making the situation worse, this change introduces a new
		`rb-c-discussion-header` component that can be used in each of these
		areas. It's responsible for showing the author information or title, the
		timestamp, and an optional avatar and "new updates" icon.

		This can also be put in compact mode, which places the timestamp below
		the name. Replies enable this and avatars, whereas the review headers do
		not.

	+	An improved mobile display now uses the compact mode for all cases.
	+	Previously, the timestamp remained on the right-hand side of the title,
	+	which left little room for content.
	+
		A Storybook story has been added to help document and maintain this
		component.

Commits:

	Summary	ID
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. A Storybook story has been added to help document and maintain this component.	79e8306c69a17df48ad9aa58c737e23f8c5ce1d1
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. An improved mobile display now uses the compact mode for all cases. Previously, the timestamp remained on the right-hand side of the title, which left little room for content. A Storybook story has been added to help document and maintain this component.	0d7e0d769bd295032c9ee70ac88bc14e775f4e15

Diff:

Revision 3 (+990 -214)

Show changes

	docs/stories/components/reviews/discussion-header.stories.ts
	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/discussion-header.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewReplyEditorView.es6.js
	reviewboard/static/rb/js/reviewRequestPage/views/tests/baseStatusUpdatesEntryViewTests.es6.js
	reviewboard/templates/reviews/review_reply.html
	reviewboard/templates/reviews/entries/base.html

Added Files:

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

docs/stories/components/reviews/discussion-header.stories.ts (Diff revision 3)
The issue has been resolved. Show all issues
```
Probably should be typed as HTMLElement | null
```

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

The issue has been dropped. Show all issues

Can you double check the spacing with drafts?

chipx86

April 2, 2026, 6:33 a.m.

Yep, spacing is fine. This is effectively replaced by the margin-bottom: 1em on the discussion header in .review-comments-inline().

Change Summary:


Updated a type to explicitly handle null.
Updated the RB version to 8.0.

Commits:

	Summary	ID
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. An improved mobile display now uses the compact mode for all cases. Previously, the timestamp remained on the right-hand side of the title, which left little room for content. A Storybook story has been added to help document and maintain this component.	0d7e0d769bd295032c9ee70ac88bc14e775f4e15
	Fix the header above reviews/replies and make it a new component. The work on user badges regressed some of the display of the header area at the top of reviews and in comments. This wasn't helped by the fact that this is some of the oldest CSS in the codebases, and it's a huge rats nest. Fixing this meant fixing it in multiple places and then dealing with overrides. Instead of making the situation worse, this change introduces a new `rb-c-discussion-header` component that can be used in each of these areas. It's responsible for showing the author information or title, the timestamp, and an optional avatar and "new updates" icon. This can also be put in compact mode, which places the timestamp below the name. Replies enable this and avatars, whereas the review headers do not. An improved mobile display now uses the compact mode for all cases. Previously, the timestamp remained on the right-hand side of the title, which left little room for content. A Storybook story has been added to help document and maintain this component.	146ca9137f142ff9d9db1b399848b9137d07ab0d

Diff:

Revision 4 (+990 -214)

Show changes

	docs/stories/components/reviews/discussion-header.stories.ts
	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/css/ui/discussion-header.less
	reviewboard/static/rb/js/reviewRequestPage/views/reviewReplyEditorView.es6.js
	reviewboard/static/rb/js/reviewRequestPage/views/tests/baseStatusUpdatesEntryViewTests.es6.js
	reviewboard/templates/reviews/review_reply.html
	reviewboard/templates/reviews/entries/base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.1.x (b964f4e)