search

posimagi / bg-wiki-dark-mode

Issue tracker for Dark Mode on bg-wiki.com
1 stars 0 forks source link

Mobile View for Website is Broken (both dark & light) #9

Closed siyual closed 1 year ago

siyual commented 1 year ago

When viewing the site from mobile, the page is not loading properly in the frame. As an example, for any item's page, you need to manually scroll to the right on mobile to see the link for FFXIAH.

Previously most pages worked fine on mobile, but since this update it seems all pages now require horizontal scrolling to see all of the contents.

Note: this is broken in BOTH dark and light themes. This had not been an issue before dark was rolled out.

posimagi commented 1 year ago

Thanks for the heads-up. Even though it may not be related to dark mode I will look into it.

posimagi commented 1 year ago

We rolled out the upgrade from MediaWiki 1.35 to 1.39 at the same time, so it may be related to that.

posimagi commented 1 year ago

Out of curiosity, what resolution is your screen? It seems like it needs at least 394px horizontally to render correctly (which shouldn't be an issue for most phones), but still looking into why it's clipping.

siyual commented 1 year ago

It's 414x896 - I'm using an iPhone 11 Pro Max

Here's a screenshot of what I'm seeing for item pages:

image

Also seeing various odd artifacts that may be related. This is from the Escutcheon page:

image

posimagi commented 1 year ago

Thanks for the info.

posimagi commented 1 year ago

It seems to be the case that the image is not scaling down when the viewport is too small. I'm assuming it used to. Trying to figure out why that changed.

posimagi commented 1 year ago

max-width for the element is set to unset !important, which is overriding the directive to scale it down to the viewport. I will need to escalate this issue.

image

image

posimagi commented 1 year ago

This change introduced in MediaWiki 1.36 is the culprit. Removing !important from table a > img {max-width: unset;} (in both Timeless and TimelessDark) will resolve the issue as long as one of the following is true:

  1. The image is inside a container which has max-width: 100%/100vw or less, or
  2. The a is within a span which declares those properties (this should be a one-off fix for the Sitenotice, as it's not practical to deploy sitewide).

I have already made the frontend changes needed to fix this issue, Ragns will make the backend changes.

posimagi commented 1 year ago

Proof of concept from local test environment image

posimagi commented 1 year ago

I've tried adding scaling to .sitenotice a > img, unfortunately I can't easily check if it will work, so I'll have to wait for the change to work through the cache.

posimagi commented 1 year ago

Sitenotice appears fixed from my end. Are you able to confirm that pages rendering well now?

I know there are still some issues with pages with large tables (such as Escutcheon). These unfortunately seem like they'll have to be handled one by one.

siyual commented 1 year ago

Looks good on my end! Thank you!

Yeah, the larger pages like the Escutcheon one are still a bit wonky, but all of the item pages appear to be displaying properly.

posimagi commented 1 year ago

Closing this issue. Pages with breaking tables will be addressed as I work my way through all the edge cases. If there's another issue that affects multiple categories of pages feel free to reopen this issue or file a new one.