search

code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.51k stars 140 forks source link

Height frozen in multiple filenames #184

Closed pedrosousa13 closed 2 months ago

pedrosousa13 commented 2 years ago

Hi!

We're having an issue where the height is not dynamic on multiple filenames. It adds scrollbars to both x and y axis. Should it maybe expand automatically? Or we could have an option for that specific case.

Here's a video with the issue

https://user-images.githubusercontent.com/4235827/169536978-5a001a80-1213-4565-92e9-5b30acc70c67.mov

.

pomber commented 2 years ago

Yes, that's kind of intentional. Sometimes you don't want elements that expand vertically because it shifts all the elements below.

But I understand sometimes you do want the element to expand vertically. So I'm still looking for the right solution.

For now, one workaround could be to set a bigger height manually. In Code Hike v0.5.1 that would be <CH.Code style={{height: 300}}>. I know it's not ideal.

berber1016 commented 2 years ago

I had a similar problem，Using <CH.Scrollycoding> and <CH.Code> causes the second file to be highly locked and unable to scroll， such as:

<CH.Scrollycoding>
// some text...
<CH.Code>
// the issue description in here,the first file line is 10,the second file line is 30
</CH.Code>
</CH.Scrollycoding>
pomber commented 2 years ago

@berber1016 can you provide an example (you can try the new playground: http://play.codehike.org/)? inside Scrollycoding the height should behave differently

berber1016 commented 2 years ago

@pomber Yes, you can click this link view this problem.

when you activing first paragraph on the left,change active second file, you can not scrolling the second file. image

ndom91 commented 2 years ago

I'm having a similar issue, the <CH.Scrollycoding> component's height seems to not adjust correctly when more text is eventually shown.

Demo: https://next-auth-git-ndom91-upgrade-to-mdx-v2-nextauthjs.vercel.app/configuration/initialization Code: https://github.com/nextauthjs/next-auth/blob/95d9263954970c4d13e434bb86adbedcd566bc99/docs/docs/configuration/initialization.mdx

pomber commented 2 years ago

@berber1016 the reason the second file can't be scrolled is the focus=12:17, if you remove it you'll be able to scroll.

@ndom91 and @berber1016, the height of the code in the Scrollycoding component is the max between 200px and the height of the first step code. You can change that 200px with --ch-scrollycoding-code-min-height. See the CSS --ch-scrollycoding-code-min-height: 80vh; in this demo.

I'm still working on a smarter default height :)

pomber commented 2 years ago

BTW @ndom91, I'm using NextAuth.js for codehike.org, let me know if you have any issues or requests.

ndom91 commented 2 years ago

BTW @ndom91, I'm using NextAuth.js for codehike.org, let me know if you have any issues or requests.

Thanks a lot, the css var for min height did the trick for that issue btw :tada:

We were thinking about adding it to the docs, really love the scrolly coding thing. But tbh we just don't have a great use-case for scrolly coding. We have very few (if any at all) docs pages which start with 1 file and then progressively add things, highlight, etc. that same 1 file.

However, in general I really like the highlighting, bg, notes, etc. of codehike as well. Maybe we'll use it for just those anyway!