elwiktionary has a problem on telephone screens, when displaying English nouns
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	FocalPoint
	May 18 2024, 8:41 PM

Description

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

please see https://el.wiktionary.org/wiki/farm how it looks on a mobile screen:

same in https://el.wiktionary.org/wiki/hour
this seems to happen in articles of English language

What happens?:

The word "Ουσιαστικό" does not appear correctly, it appears vertically. This comes from a template, the [[:el:wikt:ουσιαστικό]] with the "|en" modifier.

I cannot find what happens or how I can fix it. I believe it is not a "system bug", but I saw the template last edit. It is not recent, so what happens is not due to some recent modification.

What should have happened instead?:

The word "Ουσιαστικό" should have appeared horizontally.

The problem has been reported by a user and replicated by me.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

Event Timeline

FocalPoint created this task.May 18 2024, 8:41 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 18 2024, 8:41 PM

Izno added a project: Local-Wiki-Template-And-Gadget-Issues.May 18 2024, 11:20 PM

Hi @FocalPoint, thanks for taking the time to report this! Please provide full links and please upload screenshots here in Phabricator itself, as I just had to spend 10 seconds clicking five times to disagree on cookies on "imgur.com".

Aklapper updated the task description. (Show Details)May 19 2024, 12:20 AM

Aklapper attached a referenced file: F53756518: rWkUov2.png. (Show Details)

Cannot reproduce using Firefox 126. Please provide clearer steps to reproduce:

Screen Shot 2024-05-19 at 02.22.19.png (800×382 px, 51 KB)

This comes from a template, the [[:el:wikt:ουσιαστικό]] with the "|en" modifier.

User scripts, gadgets, templates, custom CSS are local on-wiki content. Local content is managed independently on each wiki, by each wiki community themselves.
Phabricator is mostly used for MediaWiki, MediaWiki extensions, or server configuration, or by developers and teams to organize what they plan to work on.
If you are looking for help with the local code on a wiki, please see https://meta.wikimedia.org/wiki/Tech instead.
This needs fixing on the local wiki by editing its local content. Thus I am closing this task here - thanks for your understanding.

Many thanks @Aklapper for examining the issue. I will contact meta.

This seems to be a bug/inconsistency in the WebKit browser engine (which is AFAIK still used by all browsers running on iOS/iPadOS even within the EU, as well as by Safari on macOS and GNOME Web on Linux). I tried to load https://el.wiktionary.org/wiki/farm?useskin=minerva in Firefox and GNOME Web on Linux, and Firefox looked like on @Aklapper’s screenshot but GNOME Web looked like on @FocalPoint’s screenshot. Adding the following CSS snippet in GNOME Web fixed the overlap (but at the same time moved the edit buttons of <h3>s from the far right to directly after the section title):

h3 { display: block !important; } /* Minerva sets it to display:flex */

So what’s broken is the heading (styled by Minerva), not the floating box (styled by inline CSS, i.e. local content).

Hah, thanks for the correction! Appreciated.

You have a table via template there that's floated (https://el.wiktionary.org/wiki/%CE%A0%CF%81%CF%8C%CF%84%CF%85%CF%80%CE%BF:en-noun-s)
This template needs to be adjusted so the float only applies on mobile (perhaps using a template style that applies { float: none !important;}

Let me know if you need help with identifying the underlying template and the appropriate fix.

We don't tend to patch skins for this sort of content problem - as they likely impact apps and 3rd parties who render the content.

I have informed colleagues in el-wikt.
We have identified as well as you did, that the issue comes from the floating table.
A temporary measure has given a partial solution (there is still an overlap, but at least we do not have vertical text.
We are examining now applying margin:auto instead of float:right., even though we are used to float:right.
I copy-pasted your suggestion. We will come back if we cannot find a satisfactory solution - many thanks for the offer to help.
If you are interested, you might see the discussion on the issue at my discussion page at el-wikt: [https://el.wiktionary.org/wiki/%CE%A3%CF%85%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7_%CF%87%CF%81%CE%AE%CF%83%CF%84%CE%B7:FocalPoint#Strange_Formatting].
Thanks again.

Hi just chiming in here as I was part of the Greek wiktionary discussion.

@Jdlrobson I’d love your help on getting the table to float normally on iOS. My solution was to change the style from float:right to margin:auto which fixes the issue in Portrait Mode from this:

To this:

but the float did look nice in Landscape:

and margin:auto kind of destroys that:

So if you have a trick to get the table to float on mobile only in landscape then that would be perfect! Else, I think we're going to have to go with margin:auto because that float portrait mode is definitely not acceptable

In my volunteer capacity, we moved these styles to template styles and that seems to have resolved the issue: https://el.wiktionary.org/wiki/%CE%A3%CF%85%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7_%CF%87%CF%81%CE%AE%CF%83%CF%84%CE%B7:FocalPoint#c-Stephilippou-20240521141800-FocalPoint-20240521074800

	F53756808: Screen Shot 2024-05-19 at 02.22.19.png
	May 19 2024, 12:23 AM

	F54000512: IMG_2943.jpeg
	May 20 2024, 11:37 PM

	F54000025: IMG_2944.jpeg
	May 20 2024, 11:37 PM

	F54000282: IMG_2941.jpeg
	May 20 2024, 11:37 PM

	F54000189: IMG_2940.jpeg
	May 20 2024, 11:37 PM

elwiktionary has a problem on telephone screens, when displaying English nounsClosed, ResolvedPublicBUG REPORTActions

Description

Event Timeline

elwiktionary has a problem on telephone screens, when displaying English nouns
Closed, ResolvedPublicBUG REPORT
Actions