[BUG] code block expanding/collapsing won't work well in non-first Shortcode tabs/tab.

[lvliangxiong]

Describe the bug 描述你遇到的错误

When render md file with following content:

{{< tabs >}}

{{% tab title="index.js" %}}

first tab code block

{{% /tab %}}


{{% tab title="index.js" %}}

second tab code block

{{% /tab %}}

, second tab code block expanding/collapsing won't work well when click the title bar.

But if you turn on/off the code wrap button once, the expanding/collapsing function becomes normal.

Look like chroma.style.maxHeight = chroma.scrollHeight + 10 + "px"; in theme.ts:896 failed to get scrollHeight for code blocks in other tabs. So it's limited to 10px.

Expected behavior 期待的行为

Code block expand/collapse normally.

Screenshots 屏幕截图

No response

Build Environment 构建环境

• macos intel 15.2 (24C101)
• hugo v0.139.4+extended+withdeploy darwin/amd64 BuildDate=2024-12-09T17:45:23Z VendorInfo=brew
• theme version: "0.4.X" latest commit

Preview Environment 预览环境

• macos intel 15.2 (24C101)
• chrome Version 131.0.6778.140 (Official Build) (x86_64)

Additional Information 补充信息

No response

[HEIGE-PCloud]

Yeah this is a good old CSS problem for these kind of animations.

I think Chrome has a new feature that solves this easily, but it’s not available on Firefox or Safari https://developer.chrome.com/docs/css-ui/animate-to-height-auto

[lvliangxiong]

Yeah this is a good old CSS problem for these kind of animations.

I think Chrome has a new feature that solves this easily, but it’s not available on Firefox or Safari https://developer.chrome.com/docs/css-ui/animate-to-height-auto

I'm not familiar with css though.
So you prefer adopting a new way to implement code block expand/collapse just like the doc you mentioned, instead of fix the reason which leads to zero scrollHeight? Any chance we can fix it with a small mod?

[HEIGE-PCloud]

I'm not familiar with css though. So you prefer adopting a new way to implement code block expand/collapse just like the doc you mentioned, instead of fix the reason which leads to zero scrollHeight? Any chance we can fix it with a small mod?

I am happy to learn more about the solution you have in mind. I don't see a small mod fixing this.

[HEIGE-PCloud]

I figure interpolate-size is a rather small mod, though unfortunately some browsers do not support it #1407
https://do-it-git-fix-code-block-pclouds-projects.vercel.app/tab-tests/#tabs-with-codeblock

[lvliangxiong]

I'm not familiar with css though. So you prefer adopting a new way to implement code block expand/collapse just like the doc you mentioned, instead of fix the reason which leads to zero scrollHeight? Any chance we can fix it with a small mod?

I am happy to learn more about the solution you have in mind. I don't see a small mod fixing this.

I just comment out theme.ts:896 and theme.ts:920 on my local device testing, code block behaves normal. But I wonder wheather it'll ruin something...

[CXwudi]

@lvliangxiong maybe can you bring a PR and we can test it out

[HEIGE-PCloud]

I just comment out theme.ts:896 and theme.ts:920 on my local device testing, code block behaves normal. But I wonder wheather it'll ruin something...

It removes the expansion animation.

[lvliangxiong]

I just comment out theme.ts:896 and theme.ts:920 on my local device testing, code block behaves normal. But I wonder wheather it'll ruin something...

It removes the expansion animation.

ok, I just launched a quick pr for your reference. Look forward to your better solution. 🫡

[HEIGE-PCloud]

As I said, this does not quite work, the expansion animation is removed

Expected:

Screen.Recording.2024-12-20.at.09.38.20.mov

Actual:

Screen.Recording.2024-12-20.at.09.38.08.mov