search

elm-lang / elm-reactor

Interactive development tool that makes it easy to develop and debug Elm programs.
BSD 3-Clause "New" or "Revised" License
428 stars 63 forks source link

Fix overflow and position CSS in Errors.elm #207

Open spencerwilson opened 7 years ago

spencerwilson commented 7 years ago

This fixes #206 . The problem was twofold:

  1. The child div had a width that exceeds its parent, so it creates some new area of page that the parent doesn't (or rather can't) simply "auto-fill" to, resulting in partly white background. Fix: add overflow: auto to the parent, to bound the child within the parent.
  2. The leftmost content could be cut off. This is due to some rules of Flexbox that I don't fully understand, but I was clued in by this source to try adding margin-{left,right}: auto rules to the flex child. That sounds like it'd be redundant in the presence of the align-items: center rule, but they do have an effect, and they fix the issue.
  3. nit: There was a width: 100% rule on the outermost div, which was the inherited value anyway, so I removed it.

I found this explanation helpful throughout while debugging/making these changes.

I was unable to test this change locally due to the build instructions not being update to date for 0.17 (or rather, the expando branch that the build instructions have one checkout is not able to be elm-make'd), but making these changes by hand in current elm-reactor fixes the issues.

process-bot commented 7 years ago

Thanks for the pull request! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.