[EPIC] Ready responsive Vector for wider deployment
Open, MediumPublic
Actions

Assigned To

None

Authored By

	• MZMcBride
	Jul 22 2015, 3:23 AM

Description

Responsive Vector is now on test.wikipedia.org and all mobile domains when using the Vector skin:

With MobileFrontend: https://test.m.wikipedia.org/wiki/Main_Page?useskinversion=2&useskin=vector-2022
Without MobileFrontend: https://wikifunctions.beta.wmflabs.org

The Responsive Vector configuration flag does 2 things:

enables a viewport
disables the min-widt

It can be disabled by user preference

This however exposes many underlying problems..
In 2024, fixing many of these problems is in reach and Wikifunctions is likely to be the first user (more information at T349408)

Suggested steps

fix the subtasks of this ticket
Trial the behaviour on Wikifunctions (post-hackathon)
Roll out to other projects (post-hackathon)

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	POC: Make Vector 2022 responsive	mediawiki/skins/Vector	master	+0 -22
	Make tabs, actions and search usable in Responsive Vector	mediawiki/skins/Vector	master	+38 -8

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		None	T311254 On mobile header icons overlap with search bar in responsive mode
Stalled	Feature	None	T395948 Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1"
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
Resolved		Jdlrobson	T113101 Images should be responsive in Vector and restrained to a max-size.
Resolved	BUG REPORT	Jdlrobson	T367463 Tables with images inside them appear at minuscule size or disappear due to responsive image CSS
Duplicate	BUG REPORT	None	T313292 Slight overflow on iPhoneSE with Vector-2022 due to header
Duplicate		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
Resolved		Jdlrobson	T361573 Make Vector 2022 support viewport widths starting from 320px
Open		Jdrewniak	T314487 [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus
Resolved	BUG REPORT	Jdlrobson	T367462 Responsive Vector uses hatnote.less and infobox.less at all resolutions
Duplicate	BUG REPORT	None	T367486 Innecesary padding has been added to the infoboxes in Vector 2022
Duplicate	BUG REPORT	None	T367484 Height of images inside divs are not respected due to a css !important rule in Vector 2022
In Progress		None	T369609 Appearance menu goes off screen on smaller viewports
Open		None	T365631 Redesign Vector 2022 header and actions for mobile devices
Stalled	BUG REPORT	None	T395624 Bookmark button breaks on Vector responsive design
Resolved	BUG REPORT	DSmit-WMF	T420724 Vector 2022 responsive shows long titles very poorly on small screens, especially with Discussion Tools' "add topic" button"
Open	BUG REPORT	None	T363674 Can't toggle responsive mode for mobile without changing the desktop skin
Open	BUG REPORT	Jdlrobson	T352485 Inconsistency in skin responsive preference when $wgVectorResponsive is false.
Duplicate		None	T395859 Vector should use search dialog at lower resolutions

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson closed subtask T119871: Remove the "Read" tab in Vector's responsive design as Resolved.Mar 25 2021, 5:04 PM

Jdlrobson renamed this task from Ready responsive Vector for wider deployment to [EPIC] Ready responsive Vector for wider deployment.Mar 25 2021, 5:08 PM

Jdlrobson edited projects, added Vector 2022; removed Vector (legacy skin) (Responsive-Vector).

Jdlrobson updated the task description. (Show Details)

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptMar 25 2021, 5:08 PM

Krinkle unsubscribed.Mar 25 2021, 11:06 PM

ovasileva moved this task from Incoming to Nice to Have on the Vector 2022 board.Aug 31 2021, 8:41 PM

Jdlrobson updated the task description. (Show Details)Sep 8 2021, 2:32 PM

Harej unsubscribed.Sep 8 2021, 3:47 PM

Jdlrobson mentioned this in T293549: vector21 is not responsive.Oct 19 2021, 7:31 PM

when using on laptop screens it stops beeing responsive from 50% of the laptop screens witdht on and does not use the available space any more:

a lot of white space left and right
items stil with 2 clicks like "my contributions"
same is valid for editing - the edit area is tiny
the font is not the operating system default font and default font size

example

ThurnerRupert merged a task: T293549: vector21 is not responsive.Oct 21 2021, 6:28 PM

ThurnerRupert added a subscriber: Jdlrobson.

Jdlrobson moved this task from Menus to Feature requests on the Vector (legacy skin) board.Apr 25 2022, 9:43 PM

Change 790450 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] POC: Make Vector 2022 responsive

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

gerritbot added a project: Patch-For-Review.Jun 8 2022, 10:17 PM

Jdlrobson added a parent task: T311254: On mobile header icons overlap with search bar in responsive mode.Jun 23 2022, 6:11 PM

Jdlrobson mentioned this in T311254: On mobile header icons overlap with search bar in responsive mode.

Jdlrobson added a subtask: T113101: Images should be responsive in Vector and restrained to a max-size..Jun 24 2022, 6:59 PM

Jdlrobson added a subtask: T313292: Slight overflow on iPhoneSE with Vector-2022 due to header.Jul 19 2022, 3:24 PM

Jdlrobson mentioned this in T313123: Using an iPad on desktop mode appears very zoomed in.Aug 29 2022, 9:26 PM

Jdlrobson added a project: Web-Team-Backlog-Archived (Needs Prioritization (Tech)).Sep 2 2022, 3:10 PM

Jdlrobson moved this task from Backlog to Future Unplanned on the Web-Team-Backlog-Archived (Needs Prioritization (Tech)) board.Sep 8 2022, 8:37 PM

Jdlrobson mentioned this in T191734: Bundle MobileFrontend extension with MediaWiki.Sep 23 2022, 9:17 PM

Jdlrobson removed a project: Vector (legacy skin).Sep 27 2022, 10:35 PM

Jdlrobson mentioned this in T319305: Consider how Vector 2022 displays on mobile devices.Oct 4 2022, 3:36 PM

• alexhollender_WMF added a subtask: T319305: Consider how Vector 2022 displays on mobile devices.Oct 4 2022, 4:04 PM

Change 790450 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Make Vector 2022 responsive

Reason:

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

Izno subscribed.Jan 18 2023, 8:10 PM

Jdlrobson mentioned this in T313292: Slight overflow on iPhoneSE with Vector-2022 due to header.Feb 16 2023, 8:23 PM

Maintenance_bot removed a project: Patch-For-Review.Feb 16 2023, 8:30 PM

Jdlrobson mentioned this in T291656: Don't show "Enable responsive mode" setting on Vector 2010.Mar 29 2023, 12:13 AM

Jdlrobson moved this task from Nice to Have to Mobile on the Vector 2022 board.Jun 12 2023, 6:01 PM

Rexogamer subscribed.Oct 6 2023, 3:25 PM

Jdlrobson added a project: Wikimedia-Hackathon-2024.May 1 2024, 3:20 PM

Jdlrobson moved this task from Backlog to Hacking projects on the Wikimedia-Hackathon-2024 board.

Jdlrobson updated the task description. (Show Details)May 1 2024, 3:24 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson added a subtask: T361573: Make Vector 2022 support viewport widths starting from 320px.May 1 2024, 3:32 PM

gymate awarded a token.May 14 2024, 3:16 PM

gymate subscribed.

Antanana subscribed.May 17 2024, 2:10 PM

Kuldeepburjbhalaike subscribed.May 17 2024, 2:54 PM

Ericliu1912 subscribed.May 18 2024, 8:29 AM

Jdlrobson merged a task: T319305: Consider how Vector 2022 displays on mobile devices.May 22 2024, 4:49 PM

Jdlrobson added subscribers: • alexhollender_WMF, Winston_Sung, isaacl and 5 others.

Jdrewniak mentioned this in T315611: Keep sticky header visible until 720px (vs. hiding at 1000px).May 27 2024, 6:13 PM

Jdrewniak added a subtask: T314487: [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus.May 27 2024, 6:15 PM

Jdlrobson closed subtask T361573: Make Vector 2022 support viewport widths starting from 320px as Resolved.Jun 12 2024, 8:15 PM

Izno added a subtask: T367462: Responsive Vector uses hatnote.less and infobox.less at all resolutions.Jun 13 2024, 7:57 PM

Jdlrobson closed subtask T113101: Images should be responsive in Vector and restrained to a max-size. as Resolved.Jun 13 2024, 8:24 PM

Izno mentioned this in T360386: Create a WikimediaMessages module for sharing styles between Vector 2022 and Minerva.Jun 13 2024, 8:49 PM

Izno added a subtask: T367484: Height of images inside divs are not respected due to a css !important rule in Vector 2022.Jun 14 2024, 6:17 AM

Jdlrobson closed subtask T367462: Responsive Vector uses hatnote.less and infobox.less at all resolutions as Resolved.Jun 14 2024, 5:19 PM

Jdlrobson moved this task from Future Unplanned to Wikifunctions responsive Vector 2022 on the Web-Team-Backlog-Archived (Needs Prioritization (Tech)) board.Jul 16 2024, 11:01 PM

Jdlrobson moved this task from Needs Prioritization (Tech) to Epics/Goals on the Web-Team-Backlog-Archived board.Jul 23 2024, 11:16 PM

Jdlrobson edited projects, added Web-Team-Backlog-Archived; removed Web-Team-Backlog-Archived (Needs Prioritization (Tech)).

Jdlrobson merged a task: T371553: Add option to switch responsive mode while logged out.Aug 1 2024, 1:36 AM

Jdlrobson added a subtask: T369609: Appearance menu goes off screen on smaller viewports.Aug 1 2024, 1:39 AM

Jdlrobson added a subtask: T365631: Redesign Vector 2022 header and actions for mobile devices.

Jdlrobson added a subtask: T363674: Can't toggle responsive mode for mobile without changing the desktop skin.Aug 1 2024, 1:42 AM

Jdlrobson added a subtask: T352485: Inconsistency in skin responsive preference when $wgVectorResponsive is false..

LikeLifer subscribed.Aug 1 2024, 9:29 PM

Jdlrobson added a project: Readers Essential Work.Oct 7 2024, 9:22 PM

Jdlrobson moved this task from For triage to Unused on the Readers Essential Work board.Oct 7 2024, 9:50 PM

Jdlrobson mentioned this in T341465: The 'viewport' meta element 'content' attribute value should contain 'width=device-width'..Oct 15 2024, 8:58 PM

Titore subscribed.Nov 2 2024, 1:02 PM

Jdlrobson moved this task from Epics/Goals to Groomed on the Web-Team-Backlog-Archived board.Nov 13 2024, 11:21 PM

Jdlrobson edited projects, added Web-Team; removed Web-Team-Backlog-Archived.Nov 13 2024, 11:40 PM

Jdlrobson moved this task from Incoming to Freezer on the Web-Team board.Nov 13 2024, 11:56 PM

Unsolved problem:

In T319305#9772182, @Winston_Sung wrote:

(That's tracked in T365631)

SToyofuku-WMF changed the status of subtask T314487: [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus from Open to In Progress.Dec 11 2024, 7:06 PM

Jdlrobson changed the status of subtask T314487: [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus from In Progress to Open.Jan 17 2025, 5:29 PM

Jdlrobson-WMF moved this task from Mobile to Groomed on the Vector 2022 board.Feb 6 2025, 10:21 PM

Jdlrobson-WMF changed the status of subtask T369609: Appearance menu goes off screen on smaller viewports from Open to In Progress.Apr 4 2025, 10:10 PM

Jdlrobson-WMF mentioned this in T395948: Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1".Jun 3 2025, 10:39 PM

Aklapper added a parent task: T395948: Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1".Jun 22 2025, 4:40 PM

Rexogamer unsubscribed.Jun 24 2025, 2:54 AM

Rexogamer subscribed.Jun 24 2025, 3:49 AM

Hi, would it be possible to enable this on Wikidata? The Wikidata item interface is not very flexible at the moment, but it is workable with some CSS (I made a workable CSS for myself). The ability to use Vector would provide some options for editing properties. As you might know already – It's a highly demanded feature: https://meta.m.wikimedia.org/wiki/Community_Wishlist_Survey_2023/Wikidata/Adding_statements_on_mobile_devices

Enabling the viewport in JS is possible, but the layout can shift a lot. So a server-side option would be better. And as I understand, one can always switch back to m.wikidata. So for you to enable the option seems mostly risk-free :)

AnneT subscribed.Jul 23 2025, 4:25 PM

Hakimi97 subscribed.Sep 1 2025, 9:26 AM

Universal_Omega subscribed.Sep 18 2025, 1:33 AM

lihaohong subscribed.Sep 24 2025, 12:11 AM

Sorry for asking here but I have Vector 2022 as my skin and the responsive mode enabled in the settings but on my phone I still see the desktop version of Vector 2022. Is this the intended behaviour? If so, what does the "Enable responsive mode" toggle do?

Same. I would recommend a beta preference flag to enable responsive vector.

Jdlrobson-WMF moved this task from Unused to Vector 2022 is responsive on wikifunctions.org on the Readers Essential Work board.Mar 20 2026, 5:40 PM

Jdlrobson-WMF edited projects, added Readers Essential Work (Vector 2022 is responsive on wikifunctions.org); removed Readers Essential Work.

Johannnes89 subscribed.Wed, May 20, 5:01 AM

	F3004293: Screen Shot 2015-11-22 at 16.21.32.png
	Nov 22 2015, 3:22 PM

	F204721: Screen Shot 2015-07-21 at 11.28.23 PM.png
	Jul 22 2015, 4:39 AM

	F204715: Screen Shot 2015-07-21 at 11.20.27 PM.png
	Jul 22 2015, 3:23 AM

	F34704998: image.png
	Oct 21 2021, 6:27 PM

[EPIC] Ready responsive Vector for wider deploymentOpen, MediumPublicActions