Adjust padding/positioning of orange talk notification in user links menu
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• nray
	Jul 28 2021, 8:06 PM

Description

The orange talk notification (OBOD) does not have its intended padding and is not vertically centered as a result of several overriding CSS rules which ultimately makes the padding-top: 0 but the padding-bottom non-zero.

This can be seen on the beta cluster if your user has a talk notification https://en.wikipedia.beta.wmflabs.org.

Acceptance Criteria

The text in the notification is vertically centered

Developer Notes

See https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/708586 for. a fix

Details

	Subject	Repo	Branch	Lines +/-
	Fix padding/positioning of the user menu orange talk message notification	mediawiki/skins/Vector	master	+12 -16

Customize query in gerrit

Related Objects

Mentioned Here: T261334: [Goal] Font-size: Use `rem` in modern Vector

Event Timeline

• nray created this task.Jul 28 2021, 8:06 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 28 2021, 8:06 PM

Change 708586 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Fix padding/positioning of the user menu orange talk message notification

https://gerrit.wikimedia.org/r/708586

gerritbot added a project: Patch-For-Review.Jul 28 2021, 8:07 PM

Jdlrobson moved this task from Needs Analysis to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 28 2021, 10:01 PM

• nray moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 28 2021, 10:41 PM

Please move to sign off when this passes design review. If it it doesn't move to needs more work. Please test on the beta cluster.

Change 708586 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix padding/positioning of the user menu orange talk message notification

https://gerrit.wikimedia.org/r/708586

Maintenance_bot removed a project: Patch-For-Review.Jul 28 2021, 11:10 PM

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.17; 2021-08-02).Jul 29 2021, 12:00 AM

LGoto edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Kanbanana-FY-2020-21).Aug 2 2021, 9:28 PM

LGoto moved this task from Needs Analysis to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

• alexhollender_WMF assigned this task to ovasileva.Aug 3 2021, 5:12 PM

• alexhollender_WMF moved this task from Design Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

• alexhollender_WMF subscribed.

This comment was removed by • alexhollender_WMF.

• alexhollender_WMF claimed this task.Aug 3 2021, 5:14 PM

• alexhollender_WMF moved this task from Ready for Signoff to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

• alexhollender_WMF added a subscriber: ovasileva.

looks good

@nray it seems like fixing the vertical position of this element could be as simple as changing top: 85% when it's positioned absolutely. Do you think that's a trivial/non-risky change that we could make here, or would it be better to do in a separate task?

current	adjusted

@alexhollender It's trivial, and I'm happy to change it to whatever value you prefer as part of this ticket, but if we go with the 85% are you okay with the hover state of the buttons overlapping with the OBOD?

Screen Shot 2021-08-03 at 12.01.54 PM.png (236×614 px, 36 KB)

@nray good point...also my bad, because we're going to eventually update the tabs I'll make a note to revisit this after that.

85% sounds like a magic number to me. Could we eventually do this in ems as relative size, which is easier to switched over to rems when T261334 is clarified.

ovasileva closed this task as Resolved.Aug 5 2021, 8:46 PM

	F34575004: Screen Shot 2021-08-03 at 12.01.54 PM.png
	Aug 3 2021, 6:04 PM

	F34574979: Screen Shot 2021-08-03 at 1.11.52 PM.png
	Aug 3 2021, 5:12 PM

	F34574991: image.png
	Aug 3 2021, 5:29 PM

	F34574987: obod.webm
	Aug 3 2021, 5:29 PM

	F34574992: image.png
	Aug 3 2021, 5:29 PM

Adjust padding/positioning of orange talk notification in user links menuClosed, ResolvedPublicActions