Rendered + styled component growing outside iframe bounding box, is cut off

[chrisfromredfin]

A utility extend:

%button {
  border-radius: 5px;
  background-color: green;
  color: white;
  font-weight: bold;
  padding: 1rem;
  text-decoration: none;
  box-shadow: 6px 3px 3px black;
  &:hover {
    text-decoration: underline;
  }
}

And a regular button:

/// @group components
/// @name button
/// @example scss
///   .button {
///     @extend %button;
///   }
/// @example html
///   <a href="#CTA" class="button">Click me!</a>
.button {
  @extend %button;
}

My customCSS brings in the following css file, compiled from this.

.button {
  border-radius: 5px;
  background-color: green;
  color: white;
  font-weight: bold;
  padding: 1rem;
  text-decoration: none;
  box-shadow: 6px 3px 3px black; }
  .button:hover {
    text-decoration: underline; }

My output in Herman:

Part of it is the height of the iframe being set to 42, which I don't think is including the padding on my element? The other part, I believe (because even if you bump the iframe up to height 92 it's still cut off on TOP), is the padding of the iframe is covering the start of body (.7em padding on iframe, but 8px (user-agent style) on body)?

Not really sure what the right solution is.

[mirisuzanne]

Yeah, I've noticed that. We could add padding to the internal document body, rather than the wrapping frame, I think that would be a good start. There would still be issues I'm not sure how to solve…

[mirisuzanne]

Adding this to the backlog.

@jgerigmeyer I've noticed that font-specimen output triggers an internal scroll-bar on the iframe. I'm not sure if that's related (iframe sizing issues) or should have a story of it's own?

[jgerigmeyer]

Yeah, I think that's caused by the height getting set before fonts are fully loaded/rendered? So probably a different story.