set style override for <pre> tag to visible overflow

[figuerom16]

This is a fix for when using CSS frameworks like BulmaCSS. For BulmaCSS all <pre> tags are set with overflow-x: auto; which causes horizontal/vertically scrolled code to be cut off with a white background.

Forcing pre to overflow visible will override other CSS frameworks hopefully saving future headaches.

code-input pre {
  z-index: 0;
  overflow: visible!important;
}

Thank you for making this by the way!

[WebCoder49]

Thanks for this, @figuerom16!

Looks good to me:

• Fixes a bug.
• I don't think it's a breaking change becauseoverflow on the pre element is something internal to code-input.js and dependent on its JavaScript, not something that should be externally styled.

I'll commit and release this today, crediting you of course.

[WebCoder49]

TL;DR: the release will be slightly later; there's still some bugginess remaining.

Oops; there's a another bug for compatibility between Bulma dark mode and highlight.js; it's partially fixed so far (as far as I thought it could be fixed from code-input.js) but it turns out it only appears when code-input.js so needs to be fully fixed, and my previous code actually caused another sizing bug elsewhere.

[figuerom16]

I tried your code-input.css with Bulma dark mode and highlight.js and it seemed to work just fine for me. I might be skipping out on the sizing issue since I use <code-input style="height: auto"... and vertically size the textarea with an input event listener setting textarea.style.height = 'auto' repeatedly.

[WebCoder49]

@figuerom16 I noticed it was a symptom of using highlight.js, Prism.js and Bulma dark mode in the same page, independent of code-input.js. It is not in the scope to fix for code-input.js, and I have made a note about it in the testing page and reverted by attempted fix. I think it's ready for release.