Page MenuHomePhabricator

images wrapped in flex item styling get really small in Timeless/Minerva
Open, Needs TriagePublic

Description

Both Minerva and Timeless set image CSS that looks like:

.mw-body a > img, .mw-body .floatnone > img {
    height: auto !important;
    max-width: 100% !important;
}

(Minerva selects .content a > img, .content noscript > img.)

This works great for most images, but if you have a structure like this:

<div style="display: flex">
  <div class="flexy-item">[[File:Example.jpg|40px]]</div>
  <div class="anotherflexy-item">...</div>
</div>

The image gets very small at basically all resolutions rather than respecting its own width. Turning off max-width: 100% !important; fixes the problem. I've employed such a structure in multiple places, most recently Template:Checkuserblock-account (flex is so convenient for replacing presentation tables).

image.png (145×239 px, 5 KB)

Behavior occurs in Chromium Edge and Firefox, so I guess that means everyone's browser basically.

(Aside: I don't entirely understand why the !importants are there, since the CSS will always override the img width attribute anyway, and there's no way editor side to override it. Scared of some other CSS on the programming side???)

In the particular context, I can't knock off the 100% with TemplateStyles (which would sometimes be available), so any other workarounds would be welcome.

Event Timeline

This doesn't seem to impact Vector, though I'm not sure if Vector has gotten small resolution image treatment yet (which I presume is the utility of the CSS of interest).

So, here's a workaround for the time being I guess: add another div internal to the flex item to contain the image and set a width on that element.

<div style="display: flex">
  <div class="flexy-item">
    <div style="width: 40px">[[File:Example.jpg|40px]]</div>
  </div>
  <div class="anotherflexy-item">...</div>
</div>

Though this doesn't seem to work if one of the float classes has been set on the element - back to small again.

@stjn found setting flex works to fix this also:

<div style="display: flex">
  <div class="flexy-item" style="flex: 0 40px">[[File:Example.jpg|40px]]</div>
  <div class="anotherflexy-item" style="flex: 1">...</div>
</div>

Probably the best solution without changing more.

This is practically the same as with tables (there's a ticket somewhere). If there is no set min-width and you enable responsive images (Which is basically what that mobile/minerva code does) then the smallest valid size is like 1px. Best is to set a min-width on anything you don't want to be smaller than a certain size.

Jdlrobson added a subscriber: Jdlrobson.

I suggest this is fixed in the template.

There is already an inline style padding-right: 0.5em; on the element and a min-width: 20px; could be added there to prevent the shrinking.

I don't see any good generic solution, and the problem that rule is solving seems a greater to one to solve than posed by this use case.