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 ]], there's a large margin between the thumbnail and the text extract.
| {F17287242} large margin | {F17287247} small margin |
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.
//Notice the distance of the settings cog to the thumbnail.//
| {F17287242} now | {F17287473} better? |
=== 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, if instead of being 450px wide all the time, is was only wide an necessary//.
=== Developer notes
The width of the SVG is defined in CSS, it should instead be equal to the width of the thumbnail instead (when the thumbnail is "tall"). The width of the popup itself is also defined in CSS, this should be changed equal the width of the text-extract + SVG.