List of steps to reproduce (step by step, including full links if applicable):
- Use an iPad or desktop:
- https://en.wikipedia.org/api/rest_v1/page/mobile-html/List_of_Choate_Rosemary_Hall_alumni
- Go to the section K
What happens?:
The caption overflows the width of the image. This is particularly visible in production on iPad article views.
What should have happened instead?:
The width pf the caption should be restrained by the size of the image
Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:
This is because of the figure/figcaption layout used by Parsoid. Adding the following to the styling would fix the problem:
figure { display: table; /* Get sizing from the img */ } figcaption { display: table-caption; caption-side: bottom; }
Ideally, we'd use min-content, but browser support is only 70% percent globally
figure { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
