Line width of search results in Minerva too wide (due to mediawiki.special.search.styles hardcoding 50em width)
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	toorich
	Sep 20 2022, 4:44 PM

Description

Steps to replicate the issue (include links if applicable):

Open any WMF-hosted wiki like https://zh.wikipedia.org;
Search anything that included in the article.

What happens?:
Search results have text content line feeds that exceed the device screen width.

What should have happened instead?:
The text content of the search results will not exceed the width of the device screen in line feed position.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Can be reproduced at least on Internet Explorer 11 (simulate Windows Phone device on PC) and Chrome (including Chromium-based browser) 105.

Event Timeline

toorich created this task.Sep 20 2022, 4:44 PM

Restricted Application added subscribers: Ericliu1912, Stang, Aklapper. · View Herald TranscriptSep 20 2022, 4:44 PM

toorich updated the task description. (Show Details)Sep 20 2022, 4:48 PM

StevenSun added a project: Advanced-Search.Sep 21 2022, 2:29 AM

Hi @toorich, thanks for taking the time to report this! Please provide a full, clear, complete list, including all full URL/links and search terms as text, which allow someone else to reproduce the problem, without any interpretation. I cannot reproduce this, but I might not perform the correct steps.

In T318180#8250227, @Aklapper wrote:

Hi @toorich, thanks for taking the time to report this! Please provide a full, clear, complete list, including all full URL/links and search terms as text, which allow someone else to reproduce the problem, without any interpretation. I cannot reproduce this, but I might not perform the correct steps.

You can reproduce the problem by browsing this url on your smartphone:
https://zh.m.wikipedia.org/w/index.php?search=北京&title=Special:Search&profile=advanced&fulltext=1&ns0=1

Thank you, I can reproduce now.

The technical problem here is the CSS line

.mw-search-results-info,
.mw-search-results-container {
  width: 50em;
}

from mediawiki.special.search.styles being also applied on the Minerva skin

Restricted Application added a project: Discovery-Search. · View Herald TranscriptSep 21 2022, 5:13 PM

Aklapper renamed this task from zh.wikipedia.org search results do not linewrap on mobile skin to Line width of search results in Minerva too wide (due to mediawiki.special.search.styles hardcoding 50em width).Sep 21 2022, 5:14 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptSep 21 2022, 5:14 PM

In T318180#8251096, @Aklapper wrote:
Thank you, I can reproduce now.

The technical problem here is the CSS line
.mw-search-results-info,
.mw-search-results-container {
  width: 50em;
}
from mediawiki.special.search.styles being also applied on the Minerva skin

But it seems also can be repoduced on Timeless Skin.

toorich changed the task status from Stalled to Open.Sep 21 2022, 5:36 PM

• MPhamWMF moved this task from needs triage to watching / waiting on the Discovery-Search board.Sep 29 2022, 7:41 AM

• MPhamWMF moved this task from watching / waiting to UI tickets on the Discovery-Search board.Sep 29 2022, 7:52 AM

ovasileva subscribed.Sep 29 2022, 8:17 AM

Ericliu1912 unsubscribed.Oct 22 2022, 1:06 PM

Izno moved this task from Backlog to Change CSS on the CSS board.Dec 20 2022, 2:39 AM