Topic on Talk:Page Previews/Flow

This topic is for discussion of the computer code used to display the Page Previews/Hovercards feature, mainly issues with HyperText Markup Language version 5 (HTML), Cascading Style Sheets (CSS) and JavaScript (JS).

After a quick look at the Page Previews/Hovercards HTML5 code, I noticed that the CSS frequently uses pixels which is bad because it's an absolute/fixed unit so doesn't change on different screen sizes, browsers and devices (requiring extra media query code to fix this). Using relative units, a feature of responsive web design, is a simpler and better approach which is already used for most MediaWiki web page formatting and should be used here.

The main responsive relative units which should be used are em/rem (based on font size) and percentage widths (%). Also, this problem isn't just about element lengths; the font size of the hover box uses pixels too, which can look bad on different screens. Using "em"/"rem" for the font size (relative to element and browser font sizes) is best.

Another issue is the summary image inside the Page Previews container being too tall when displayed horizontally (it overflows slightly). For example, a link to https://en.wikipedia.org/wiki/Cube demonstrates this issue, showing the image sticking out downwards by a few pixels. This should just be a quick Cascading Style Sheets fix - making the image have a maximum height of the container's height (e.g. max-height: 100%) and ensuring nothing else can overflow or cause scrollbars.

Tracked in Phabricator
Task T153840

Reported this particular issue (overflowing summary image) as T153840.

HTML/JavaScript/CSS is enabling me to save Academic Information Pages as is. Enabling us to access this valuable data for all free and self-actualization Because of Java and HTML l'm accessing and saving data as page documents. Thanks to Wikipedia.Org and latest technologies for 21st century,(CISCO/MICROSOFT etc) Marry Christmas and Happy New Year 2016-17/20.

I recently spotted a visual problem with the horizontal gradient (which is used to show the article content continues) at the end of the article description text: its large height causes it to cover part of the previous line.

After checking the HTML code, I found the problem. The text line height is set to 20px and the gradient pseudo-element has the height 24px. The pseudo-element should be the height of a line of text (20px here). To prevent the issue happening again if the text font size changes, the height should be set to "1em".

Please fix this minor issue - an image showing my screenshots of the problem is available at https://snag.gy/v3Tf8z.jpg and any article with a tall letter such as "g" on the end of the second last line of the Page Previews/Hovercards text should cause this problem.

Tracked in Phabricator
Task T165974

@Edwardj 123 - thank you for pointing this out, filed a bug and lined up for the next sprint (should be fixed within 2 weeks).

Closed duplicate issue Minor bug: horizontal gradient also affects the forelast row (https://www.mediawiki.org/wiki/Topic:Tmnli29do9tljttg).