Scroll horizontal shown when using `* { box-sizing: content-box }` (Tailwind base)

[colelawrence]

I fixed this issue by adding the following CSS to my own project to override base tailwind.

.ch-codeblock * {
  /* Fix horizontal scrollbars added to CodeHike blocks as a result of tailwind screwing up measurements */
  box-sizing: content-box;
}

This might be something that Code-Hike should include in its stylesheet.

I was able to demonstrate this in the yarn dev

After adding * { box-sizing: content-box }:

Before (Bug)

[pomber]

Thank you. I didn't know Tailwind base was so "aggressive". I'll try to add some defensive CSS (like yours) to the default styles.

[pomber]

btw, can you tell me the browser and OS? scrollbars are weird

[colelawrence]

@pomber, I'm on Chrome 103 on macOS Intel

[colelawrence]

It appears that my work around does not really work for Firefox 102 on macOS Intel

As well, it appears that even with the fix, when there is no scroll-y, hovering over the scroll area and trying to scroll vertically still traps you from scrolling down the page. 🤷

[pomber]

hovering over the scroll area and trying to scroll vertically still traps you from scrolling down the page

I fixed that on v0.7.2 (#241).

I'll try to debug the other issue. It would be great if you manage to isolate it inside the playground.

[pomber]

I couldn't reproduce the * { box-sizing: content-box } issue. If you are able to consistently reproduce it please share a playground.

[pomber]

I think these are the elements that need content-box:

[data-ch-panel] > div {
  box-sizing: content-box !important;
}

I'll add that to codehike's stylesheet later

[github-actions[bot]]

:rocket: Issue was released in v0.7.4 :rocket: