CSS fixes to improve the debugger

[Paul Biggar]

To make the debugger useful in our app, we added this CSS. It doesn't make it completely usable, but it's an improvement.

#debug {
  min-height: 20px;
  z-index: 100;
  position: absolute;
  bottom: 0;
  right: 0;
  max-height: 500px;
  max-width: 500px;
  overflow: scroll;
}
#debug nav {
  max-width: 50%;
}
#debug nav .history span.details {
  width: 25px;
}
#debug nav .history span.message {
  width: calc(100% - 75px);
}
#debug nav .history span.index {
  width: 30px;
  clear: both;
}

[OvermindDL1]

Hmm, it was originally designed to be themed however the app wanted so it was left fairly basic, however setting up something a bit more useful would be nice! Do you want to do a PR? :-)

[OvermindDL1]

I'd think either just documenting it at the simpliest, or perhaps adding the above as a basic css mixin function that can be called so the user can add it to their own CSS handlers (and thus override it) would be best. Adding it directly to the debug view itself would make it pretty impossible to override then so not sure that should be done (and in fact any CSS on it should probably be pulled out, hmmm...).

[Paul Biggar]

For us, it wasn't a theming problem, it was that the debugger was unusable (important parts weren't clickable because the display was much to large, off screen, or covered/invisible. We had a direct port from Elm, and the Elm debugger didn't have any of these issues. Directionally, we may want to copy the Elm Debugger HTML/CSS to make this better.

[OvermindDL1]

Ah yeah that can indeed happen. ^.^;

Hmm, so a basic CSS mixin perhaps...