On mobile header icons overlap with search bar in responsive mode
Open, LowPublic
Actions

Assigned To

None

Authored By

	Fokebox
	Jun 23 2022, 4:14 PM

Description

Hi!
I use following MW:
MediaWiki 1.38.1
PHP 7.3.32 (cgi-fcgi)
MySQL 5.7.34
I would suggest to the development team to improve the outlay of Mobile version of new Vector 2022 skin. I have svg logo uploaded and as you can see that the search button is very close to the logo (Google Chrome from iPhone 11):

09A32C02-4326-496E-819B-12B12A6E5CBB.jpeg (540×1 px, 235 KB)

I would line the buttons with margins as it shown like on the image below:

A262B34B-4D6F-4F25-89D7-177ADB8E560A.jpeg (540×1 px, 30 KB)

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T311254 On mobile header icons overlap with search bar in responsive mode
Open		None	T106463 [EPIC] Ready responsive Vector for wider deployment
Duplicate		None	T106464 Consider collapsing/expanding search bar in responsive Vector
Resolved		Jdlrobson	T106281 Site logo should be present on Vector's responsive design
Resolved		Jdlrobson	T106465 Figure out what to do with the personal tools in responsive Vector
Duplicate		None	T113363 Make personal tools flexible/resilient wrt extension additions
Resolved		Jdlrobson	T106466 Figure out what to do with the footer area in responsive Vector
Resolved		Jdlrobson	T113362 Consider moving searchbar to sidebar in responsive Vector
Resolved		Jdlrobson	T119871 Remove the "Read" tab in Vector's responsive design
Open		Jdlrobson	T113101 Images should be responsive in Vector and restrained to a max-size.
Open	BUG REPORT	None	T313292 Slight overflow on iPhoneSE with Vector-2022 due to header
Open		None	T319305 Consider how Vector 2022 displays on mobile devices
Duplicate	BUG REPORT	None	T323191 Alerts/notifications flyouts misaligned on mobile when width=device-width is enabled

Event Timeline

Fokebox created this task.Jun 23 2022, 4:14 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 23 2022, 4:14 PM

Do you have $wgVectorResponsive = true in your LocalSettings.php? If so, this is not production ready yet (see T106463).

Jdlrobson renamed this task from Bug at Mobile version of new Vector 2022 skin to On mobile header icons overlap with search bar in responsive mode.Jun 23 2022, 6:11 PM

Jdlrobson edited projects, added Desktop Improvements (Vector 2022); removed Vector (legacy skin).

@Jdlrobson yes I have $wgVectorResponsive = true;

Jdlrobson added a project: Web-Team-Backlog.Jun 24 2022, 3:06 PM

Jdlrobson moved this task from Incoming to For Iteration on the Desktop Improvements (Vector 2022) board.

Hoping to fix this for 1.39 release but can't promise that. I've updated documentation to be more clear on the state of this flag: https://www.mediawiki.org/wiki/Skin:Vector/2022#Configuration_parameters

Aklapper removed Fokebox as the assignee of this task.Jun 25 2022, 9:09 AM

ovasileva triaged this task as Low priority.Jun 27 2022, 2:50 PM

ovasileva moved this task from Incoming to Groomed on the Web-Team-Backlog board.

Jdlrobson moved this task from For Iteration to Mobile on the Desktop Improvements (Vector 2022) board.Feb 8 2024, 5:31 PM

	F35268277: A262B34B-4D6F-4F25-89D7-177ADB8E560A.jpeg
	Jun 23 2022, 4:14 PM

	F35268275: 09A32C02-4326-496E-819B-12B12A6E5CBB.jpeg
	Jun 23 2022, 4:14 PM

On mobile header icons overlap with search bar in responsive modeOpen, LowPublicActions

Description

Related ObjectsSearch...

Event Timeline

On mobile header icons overlap with search bar in responsive mode
Open, LowPublic
Actions

Related Objects
Search...