learningequality / kolibri-design-system

Kolibri Design System
https://design-system.learningequality.org
30 stars 73 forks source link

Narrower padding on KPageContainer might be too small for Perseus exercises with hints showing #89

Open jonboiser opened 4 years ago

jonboiser commented 4 years ago

Hints use this "1/4" thing in the margin which is hidden for me with the narrower PageContainer padding

image

indirectlylit commented 4 years ago

this seems like an issue with the Perseus renderer. I would expect the hints section to have a wider left margin to accommodate the "hints in the margin", regardless of what kind of container it's rendered in.

jonboiser commented 4 years ago

The natural left boundary of the the exercise is where the grey line and the "4" is. It seems that perseus might actually just set el.style.left = <width of the hint label> in Javascript, since it's not in any of the CSS.

If we want to fix this in Perseus, we could had a similar inverse hack where we reduce width of the hint area by the same amount so left boundary of the hint label aligns with the left boundary of the whole exercise.