-
Robert Knight authored
Fix an issue where elements in the annotation body that were styled with margins, such as headings and block quotes, could cause the bottom of an excerpt to cropped. The issue was that margin collapsing [2] caused the margin to "leak" out of the excerpt's content `<div>` and push it vertically away from the outermost element of the excerpt. The `max-height` applied to the outermost element took into account the content's _height_ but not its vertical offset. The fix here is to make the excerpt content div a new block-formatting context [1] which ensures that any margins on elements inside the content are placed _inside_ the content element. There are various ways of doing this, but `display: inline-block` is backwards compatible down to IE 11. - Fix margin collapsing issue by making content a new block formatting context - Remove unused `excerpt__container` class and an incorrect comment about the excerpt class - Remove an unnecessary `test-name` attribute on the content element and use the class name to find it in tests instead - Add a note about some refactoring that can be done post SASS-module adoption [1] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context [2] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Fixes #1518
7b01a6c8
Name |
Last commit
|
Last update |
---|---|---|
.. | ||
annotator | ||
mixins | ||
sidebar | ||
vendor | ||
base.scss | ||
forms.scss | ||
reset.scss | ||
util.scss | ||
variables.scss |