• Robert Knight's avatar
    Fix margins on annotation body content causing content to be cropped · 7b01a6c8
    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
excerpt-test.js 4.08 KB