NOTE: this tasks refers to the //width// of the popup, not the //height//.
=== User Story
- When I hover over a link with a narrow thumbnail, ex: [[ https://en.wikipedia.org/w/index.php?search=~Holy+Roman+Emperor&title=Special:Search&profile=default&fulltext=1&searchToken=ayyk5vt5ybcvm1fgxqeayefb1 | Holy Roman Emperor ]], or [[https://en.wikipedia.org/w/index.php?search=The+Barker&title=Special:Search&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1&searchToken=eju3oo09bb2zp0wkzg6n5uane | The Barker ]] there's a large margin between the thumbnail and the text extract.
| {F17287242} large margin | {F17287247} small margin |
Notice the different distance from the settings cog to the image. The popup should be made less wide when the thumbnail is narrow.
=== Desire result
The //width// of the popup should change if the thumbnail is narrow.
| {F17287242} now , 450px wide | {F17287473} better? less than 450px wide |
=== Why is this a problem?
This change would enable us to solve T191267 without a substantial rewrite of the template markup. The easiest solution to T191267 (adding a border between the thumbnail and description) is to place a border-right on the text-extract with CSS. This approach doesn't work when the SVG is a constant width but the thumbnail is a variable width.
{F17147217}
// This border would work if the popup was less wide//.
== Design
Add a 1px border of rgba(0,0,0,0.1) to the bottom or side edge of image (depending on orientation) in the page preview. The border should be overlapping the image. Here is a diagram to clarify the placement of the border:
{F16718811}
Here are some examples that approximate the design, rendered in the browser via common.css:
{F16718976}
{F16718975}
{F16718973}
{F16718972}
{F16718971}
== Note:
- make sure this works on RTL previews
=== Developer notes
As we discovered the svg mask means we cannot use border-left but we can use a polyline element to achieve this, making sure it is horizontal or vertical and aligned with respect to the pokey.