Unexpected space before the Reply button when it wraps to a new line
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	ppelberg
	Dec 17 2022, 1:28 AM

Description

For people who have the Show discussion activity setting enabled within Special:Preferences, when the Reply button wraps onto a new line, [what looks like] an unexpected space appears before it.

Thank you to @Jonesey95 for noticing this issue.

Behavior

On desktop, visit Special:Preferences
Confirm the Show discussion activity setting is enabled
Visit a talk page where the Reply Tool is available. E.g. https://www.mediawiki.org/wiki/Talk:Talk_pages_project/Usability .
Decrease the width of your browser window such that the Reply buttons wrap onto a new line beneath the timestamp that precedes it

5. ❗️ Actual	✅ 5. Expected

Done

Expected behavior is implemented

Details

	Subject	Repo	Branch	Lines +/-
	Fix [reply] spacing on mobile when usability improvements unavailable	mediawiki/extensions/DiscussionTools	master	+7 -3
	Undo inline-flex hack, fix alignment of buttons with text when wrapped	mediawiki/extensions/DiscussionTools	master	+17 -21

Customize query in gerrit

Related Objects

Mentioned Here: T260072: Reply links seem to interfere with triple-click to select paragraph in Chrome

Event Timeline

ppelberg created this task.Dec 17 2022, 1:28 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 17 2022, 1:28 AM

ppelberg updated the task description. (Show Details)Dec 17 2022, 1:28 AM

It behaves this way because the space before the reply button is not a real space, but a piece of CSS margin. We had to do it this way, because we had to apply CSS display: inline-flex to the button to work around a Chrome bug with text selection (T260072), and it changes the normal behavior of text layout / line-breaking. However, it looks like the Chrome bug has been just recently fixed in Chrome 108, so maybe we can drop the workaround in a few months.

ppelberg moved this task from Backlog to Existing Feature Improvements on the DiscussionTools board.Jan 17 2023, 8:01 PM

ppelberg added a project: Editing-team.

ppelberg moved this task from Untriaged to This Fiscal Year on the Editing-team board.

Change 891720 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Undo inline-flex hack, fix alignment of buttons with text when wrapped

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

gerritbot added a project: Patch-For-Review.Feb 23 2023, 11:18 PM

After the changes:

Note that:

Reply buttons are aligned with normal text, horizontally and vertically
The clickable extent of the button is bigger than it looks like
Looks okay in languages where we add icons to the buttons
Looks okay on mobile too
Looks okay with visual enhancements disabled

matmarex claimed this task.Feb 23 2023, 11:22 PM

matmarex edited projects, added Editing-team (Kanban Board); removed Editing-team.

matmarex moved this task from Incoming to Code Review on the Editing-team (Kanban Board) board.

Change 891720 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Undo inline-flex hack, fix alignment of buttons with text when wrapped

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

Maintenance_bot removed a project: Patch-For-Review.Feb 24 2023, 12:30 AM

matmarex moved this task from Code Review to Ready for Sign Off on the Editing-team (Kanban Board) board.Feb 25 2023, 8:34 PM

matmarex added a project: Skipped QA.

ppelberg closed this task as Resolved.Mar 1 2023, 10:39 PM

Change 897892 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] Fix [reply] spacing on mobile when usability improvements unavailable

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

gerritbot added a project: Patch-For-Review.Mar 13 2023, 2:14 PM

Change 897892 merged by jenkins-bot: