Page MenuHomePhabricator
Create Task
Maniphest T313292

Slight overflow on iPhoneSE with Vector-2022 due to header
Open, LowestPublicBUG REPORT
Actions

Description

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

What happens?:
The viewport slightly overflows. The contents of the top bar are just a nip too wide for the screen.

What should have happened instead?:
Should not have overflowed the viewport as this is still a pretty common phone.

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

Other information (browser name/version, screenshots, etc.):

BF42FAF2-1189-41ED-AD32-2390428CBBD4.png (1×750 px, 518 KB)

3F6FD360-93B5-4595-9BB1-BC18B8F47FFC.png (1×750 px, 664 KB)

Related Objects
Search...

Event Timeline

TheDJ created this task.Jul 19 2022, 8:58 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 19 2022, 8:58 AM
TheDJ updated the task description. (Show Details)Jul 19 2022, 9:00 AM
TheDJ triaged this task as Lowest priority.Jul 19 2022, 9:04 AM
TheDJ added a project: Mobile.

low priority, as currently not targeting mobile

Jdlrobson renamed this task from Slight overflow on iPhoneSE with Vector-2022 to Slight overflow on iPhoneSE with Vector-2022 due to header.Jul 19 2022, 3:23 PM
Jdlrobson added a parent task: T106463: [EPIC] Ready responsive Vector for wider deployment.
Jdlrobson subscribed.

Confirming that we know about this problem and that it is currently low. We also need to fix problems with large images and tables.

Jdlrobson added a project: Web-Team-Backlog.Jul 19 2022, 3:24 PM
Jdlrobson moved this task from Incoming to For Iteration on the Desktop Improvements (Vector 2022) board.Jul 19 2022, 7:38 PM
Jdlrobson moved this task from Needs triage to Triaged on the Vector (legacy skin) board.Sep 27 2022, 10:39 PM
Jdlrobson removed a project: Vector (legacy skin).Sep 27 2022, 10:44 PM
Buovjaga subscribed.Feb 16 2023, 8:00 AM

We fixed this in TDF wiki by adding this to MediaWiki:Common.css:

.mw-logo {
  min-width: 10rem;
}

The overly wide logo element was pushing the user controls element out when the page width was 360px.

Jdlrobson edited projects, added Reading-Web-Third-Party-Support; removed Web-Team-Backlog.Feb 16 2023, 8:23 PM

This only impacts third parties for now (who set $wgDefaultMobileSkin = 'vector-2022';) as far as I'm aware as we currently don't have active plans to make the mobile default skin Vector (T106463 is currently unplanned). The issue is more than just the logo - for instance long titles are not particularly handled well with the current placement of languages and table of contents icon.

Jdlrobson moved this task from For Iteration to Mobile on the Desktop Improvements (Vector 2022) board.Feb 8 2024, 5:31 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL