fix: use interpolate-size for height animation

assets/css/_core/_base.scss

@@ -1,3 +1,9 @@
+/* Opt-in the whole page to interpolate sizes to/from keywords */
+// https://developer.chrome.com/docs/css-ui/animate-to-height-auto
+:root {
+  interpolate-size: allow-keywords;
+}
+
 html {
   font-family: $global-font-family;
   font-weight: $global-font-weight;

assets/css/main.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
 
 /*

assets/js/theme.ts

@@ -560,15 +560,15 @@ function initDetails() {
     )[0] as HTMLDivElement;
     const content = $summary.nextElementSibling as HTMLDivElement;
     if ($details.classList.contains("open")) {
-      content.style.maxHeight = content.scrollHeight + "px";
+      content.style.maxHeight = "fit-content";
     }
     $summary.addEventListener(
       "click",
       () => {
         if ($details.classList.contains("open")) {
           content.style.maxHeight = "0px";
         } else {
-          content.style.maxHeight = content.scrollHeight + "px";
+          content.style.maxHeight = "fit-content";
         }
         $details.classList.toggle("open");
       },
@@ -893,7 +893,7 @@ function initCodeblocks() {
       "button.line-number-button",
     ) as HTMLButtonElement;
 
-    chroma.style.maxHeight = chroma.scrollHeight + 10 + "px";
+    chroma.style.maxHeight = "fit-content";
 
     // handle expanding and collapsing code blocks
     titleBar.addEventListener("click", () => {
@@ -917,7 +917,6 @@ function initCodeblocks() {
     wrapCodeButton?.addEventListener("click", () => {
       chroma.style.maxHeight = "fit-content";
       codeBlock.classList.toggle("is-wrap");
-      chroma.style.maxHeight = chroma.scrollHeight + 10 + "px";
     });
 
     toggleLineNumbersButton.addEventListener("click", () => {

exampleSite/content/posts/tests/tab-tests/index.en.md

@@ -54,6 +54,41 @@ Content 2
 
 {{% /tab %}}
 
+{{< /tabs >}}
+
+## Tabs with Codeblock
+
+{{< tabs >}}
+
+{{% tab title="Tab 1" %}}
+
+```python
+def hello():
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+```
+
+{{% /tab %}}
+
+{{% tab title="Tab 2" %}}
+
+```python
+def hello():
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+    print("Hello World!")
+```
+
+{{% /tab %}}
+
+
 {{< /tabs >}}
 
 ## Single Tab