Talk:Reading/Web/Desktop Improvements

Overview

Features

Repository

FAQ

Discussions: Desktop Improvements • Accessibility for reading.

---

You can comment in any language. We are especially interested in:

• Feedback on the functionalities we have already deployed. (Please see Reading/Web/Accessibility for reading/Known issues before reporting bugs.)

• Expanding the list of existing gadgets and user scripts that are related to providing a better desktop experience.

We are discussing with many volunteers and communities at the same time. It may take some time for us to reply here. We apologize for that.

Thank you!

(Translate this page)

Visibility of Wikipedia search field

Following content copied from https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(proposals), as advised.

Invariably the first thing I want to do after landing at the Wikipedia home page is search for the article that I want to look at. I think it would be sensible to make the search field permanently visible. There is already room there at the top of the page, and although only a click away, it seems unnecessary to have to click on the magnifier. Why not just have the field there ready to type into? Am I right in thinking that it used to be that way? I wonder why it was changed. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 19:53, 8 September 2024 (UTC)

I think the magnifying glass only appears when the window is narrower than some threshold (looks like about 1100 px). I'm not sure why they do that; there's plenty of space left at all but the most extremely narrow widths to allow for a full search box. But in any case, this is really a Vector 2022 skin issue, not something enwiki has any direct control over. Perhaps ask on meta:Talk:Reading/Web/Desktop Improvements? RoySmith (talk) 20:04, 8 September 2024 (UTC)

You're right, it's dynamically controlled. I didn't realise that. When I lower the browser zoom level the search field becomes visible. It seems to me that all that needs to be done is adjust the "trigger" level at which it is displayed, so it is only suppressed when there is "obviously" not enough room to type a search query. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 20:32, 8 September 2024 (UTC)

Yes, but to repeat what I said earlier, this is not anything that is under the control of enwiki. This is a feature of the Vector 2022 skin, which is under the control of the Wikimedia Foundation web team and best discussed at meta:Talk:Reading/Web/Desktop Improvements. RoySmith (talk) 20:50, 8 September 2024 (UTC)

Page does not exist / link does not work, though actually I see now that there is another link there pointing to the correct page. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 21:03, 8 September 2024 (UTC)

We've been getting an influx of questions over this at places like the English Wikipedia's help desk and Teahouse. Was there a recent skin update, WMF staff? I suppose my real question here is:
Is there a link to a changelog? Tenryuu (talk) 15:39, 10 September 2024 (UTC)

@Tenryuu: There’s an overly detailed change log called Git history. I don’t know of a less detailed (and thus more usable) change log. —Tacsipacsi (talk) 21:33, 10 October 2024 (UTC)

User icons

User icons do not show up at top right of the page. Please look here --Superyetkin (talk) 16:42, 13 September 2024 (UTC)

Severe mobile usability issues with Vector-2022

I'm not sure when it happened other than it must have been some time after February 1st, 2024, though there seems to be a pretty severe usability issue with mobile devices that use some aspect ratios.

Testing was done with responsiveness dev tools in Firefox to emulate a mobile using 858px height and the "Mozilla/5.0 (Linux; Android 10; SM-G988U) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/87.0.4280.66 Mobile Safari/537.36-481" user agent. My Samsung Galaxy S23 Ultra is 1080x2316 so 400x858 uses its approximate 0.47:1 aspect ratio. Testing was done using the MangoRPG wiki on Miraheze. For reproduction: After setting the resolution to 400x858 with the user agent listed a refresh of the page is necessary for the changes to propagate successfully. Adjust horizontal resolution from there.

Please note that the direct pixel values used are largely irrelevant so long as the aspect ratios are maintained. I believe aspect ratio or percents are used rather than direct px values - a good practice in general for compatibility. Direct values will be given however with the test setup so it is easy to reproduce the same results.

With that test setup the following observations were made: After 720px width the icon (img.mw-logo-icon) is zapped. After 500px the space on the left side of the page starts getting eaten into. The mw-page-container shifts to the right as width decreases but the div.vector-header-container does not - that's what all the logo stuff is contained in which has the ☰ hamburger menu, icon, and wiki name. The vector-main-menu-landmark (☰ hamburger menu) getting removed from the screen at 415x858px. Without the navigation menu the wiki thus becomes unusable. For most users I had test the wiki on mobile devices, the ☰ was at least half cut off for all testers which cuts off a portion of the actual navigation when it is used, harming usability even then. The ellipses (...) menu is also cut off of the screen and text cuts off of the screen along with the header if using MRHeader|header or even a level 5 header as they do not wrap for some reason. Shrinking the page or scrolling to the right one can see the cut off text and ellipses menu but scrolling to the left for the ☰ hamburger menu is impossible.

I've attempted to fix it with a custom CSS for the Vector-2022 skin but I'm sadly not an advanced enough user to do so successfully.

Circa February of 2024 the ☰ hamburger menu, logo icon, and wiki name would display without being cut off on mobile devices at 1080x2316 resolution (0.47:1 aspect ratio). I'm not sure what was done to break it as I'm not sure where the changelog even is.

For functionality I recommend that the ☰ hamburger menu should never be be able to be hidden off the left side of the screen similar to how mw-page-container shifts along with its padding regardless of aspect ratio or resolution and if there's space for it the logo icon should display - I can't think of any device that couldn't display a 50x50px icon and smaller ☰ menu. The wiki name (mw-logo-wordmark) should also display if possible. On one line if it can without obstructing the top right menus such as search, ..., and notifications; otherwise wrapping.

-TiffyWiki (talk) 00:19, 22 September 2024 (UTC)

Update - I managed to fix it on my end after determining the cause.

/* no erasing ☰ */
@media screen and (max-width: 999px) {
  .vector-button-flush-left {
    margin-left: 20px !important;
  }
}
/* no erasing logo */
.mw-logo-icon {
  display: block !important;
}
/* no ... going off screen */
@media screen and (max-width: 999px) {
  .vector-user-links.vector-user-links-wide {
    margin-right: 35px !important;
  }
}

You can probably discern from this what the cause was. But here are the offenders:

@media (min-width: 720px) {
  .mw-logo-icon {
    display: block;
  }
}
@media screen and (max-width: 999px) {
  .vector-button-flush-right {
    margin-right: -12px;
  }
}
@media screen and (max-width: 999px) {
  .vector-button-flush-left {
    margin-left: -12px;
  }
}

I of course recommend correcting these for usability.

-TiffyWiki (talk)

Issue with "tabelle-kopf-fixiert" in German Wikipedia

Vector-2022 does not work with tables in German Wikipedia of:

class="wikitable sortable tabelle-kopf-fixiert"

See: https://de.wikipedia.org/wiki/Diskussion:Der_Sonntags-Stammtisch#tabelle-kopf-fixiert

Looks like the issue is already getting discussed here as well:

https://de.wikipedia.org/wiki/Vorlage_Diskussion:Tabellenstile#tabelle-kopf-fixiert_und_Vector2022

- Berny68 (talk) 04:57, 21 October 2024 (UTC)

Screen Real Estate

The new format on Desktop improves on certain aspects, but overcorrects certain others. Previously, the lines in articles were too long, that's true, but now they are too short. When reading articles, 66% of my monitor is blank white space from the right and the left. Somewhere between the old format and new is a happy middle ground. Maybe since the site already gives users the option to adjust text size, they can also be given the ability to adjust the margins? GaDub (talk) 03:08, 6 November 2024 (UTC)

@GaDub: Hello, you can read this page to know more the detail and design reason behind limited width feature. You can also share your ideas by submitting wishes to the Community Wishlist. Thanks. SCP-2000 (talk) 05:28, 9 November 2024 (UTC)