manifold
manifold copied to clipboard
ManifoldScholar
Reader should prevent images from overflowing
Expected Behavior
In-text images should be sized on mobile.
Current Behavior
Image spills out right side of frame
Steps to Reproduce
- Open chapter titled "Three Problems with Observation" https://cuny.manifoldapp.org/read/untitled-adf23c4d-e786-432d-8851-659189f441f0/section/3719c151-752f-4ea3-a82d-82f010596a32
Context (Environment)
Reading the illustrated chapter from Structuring Equality on CUNY instance on mobile becomes a problem. Chapter was ingested from a single google doc via yml manifest.
This is a little more complicated than it first appears to be. The issue with the provided text is that there are height/width properties on the span tag wrapping the actual image. We have max-width: 100% on img tags currently.
One thing we could do is set a max-width: 100% property on everything on .manifold-text-section * as nothing should really be allowed outside the bounds of its parent all the way up to the reader container. I'm sure there are things I'm not thinking of that make that a sketchier fix though.
Building on Max's comment, the height property on both the <span> and the <img> elements also needs to be overridden. So a minimal solution would be:
.manifold-text-section span {
width: 100%;
height: auto;
}
.manifold-text-section img {
max-width: 100%;
height: auto;
}
But targeting all <span> elements, or all descendants of .manifold-text-section, is bound to cause some regressions.
Do we have any additional control over how images are ingested from google docs?
Bringing this back to life. We should be able to manipulate the DOM for images in google doc ingestions. @dananjohnson, if you can clarify what we'd need to change, I can have @scryptmouse take a stab at it.
Thank you for taking the time to report this bug. We've reviewed the issue and agree that this should be fixed. We’re adding a “planned” label to indicate that we consider this bug as part of our current work plan.
This was an automated message, but please don't hesitate to reply. Our team watches these issues closely and will respond as soon as we're able to!