Summary

Prevent visual jumps when editing the change description.

Review Request #12953 — Created April 13, 2023 and submitted April 20, 2023, 8:04 a.m.

Information

Owner

david

Repository

Review Board

Branch

release-6.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

The line-height of the label for the change description field in the
unified banner wasn't enforcing a match between the text and the edit
icon, which meant that the UI would jump a few pixels when entering edit
mode (which hides the icon). Setting this explicitly makes it so things
don't reflow when that icon appears or disappears.

Testing Done

Entered/exited edit mode for the change description and saw that
everything stayed in one place.

Commits

Summary	ID
Prevent visual jumps when editing the change description. The line-height of the label for the change description field in the unified banner wasn't enforcing a match between the text and the edit icon, which meant that the UI would jump a few pixels when entering edit mode (which hides the icon). Setting this explicitly makes it so things don't reflow when that icon appears or disappears. Testing Done: Entered/exited edit mode for the change description and saw that everything stayed in one place.	f09ded8dcddc93e97779b9f6809e685be6e4ba5f

Summary

Prevent visual jumps when editing the change description.

The line-height of the label for the change description field in the unified banner wasn't enforcing a match between the text and the edit icon, which meant that the UI would jump a few pixels when entering edit mode (which hides the icon). Setting this explicitly makes it so things don't reflow when that icon appears or disappears. Testing Done: Entered/exited edit mode for the change description and saw that everything stayed in one place.

f09ded8dcddc93e97779b9f6809e685be6e4ba5f

Issues

Description	From	Last Updated
Instead of magic numbering maybe we should define a @rb-icon-edit-height value in defs.less and use that here instead.	maubin	April 18, 2023, 9:24 a.m.

flake8 passed.

JSHint passed.

reviewboard/static/rb/css/ui/banners.less (Diff revision 1)

The issue has been resolved. Show all issues

Instead of magic numbering maybe we should define a @rb-icon-edit-height value in defs.less and use that here instead.

Commits:

	Summary	ID
	Prevent visual jumps when editing the change description. The line-height of the label for the change description field in the unified banner wasn't enforcing a match between the text and the edit icon, which meant that the UI would jump a few pixels when entering edit mode (which hides the icon). Setting this explicitly makes it so things don't reflow when that icon appears or disappears. Testing Done: Entered/exited edit mode for the change description and saw that everything stayed in one place.	32a48f1e8771924033b18f15f24fcfe052825682
	Prevent visual jumps when editing the change description. The line-height of the label for the change description field in the unified banner wasn't enforcing a match between the text and the edit icon, which meant that the UI would jump a few pixels when entering edit mode (which hides the icon). Setting this explicitly makes it so things don't reflow when that icon appears or disappears. Testing Done: Entered/exited edit mode for the change description and saw that everything stayed in one place.	f09ded8dcddc93e97779b9f6809e685be6e4ba5f

Diff:

Revision 2 (+16 -2)

Show changes

	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/assets/icons.less
	reviewboard/static/rb/css/ui/banners.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-6.x (3b95deb)