From 4b787cb84ed9ac76eb4c76d108a11140b2758b5a Mon Sep 17 00:00:00 2001
From: PCloud <heige.pcloud@outlook.com>
Date: Thu, 19 Dec 2024 13:25:32 +0000
Subject: [PATCH] fix: use interpolate-size for height animation

---
 assets/css/_core/_base.scss                   |  6 ++++
 assets/css/main.css                           |  2 +-
 assets/js/theme.ts                            |  7 ++--
 .../content/posts/tests/tab-tests/index.en.md | 35 +++++++++++++++++++
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index 3547f0598..5e31569a9 100644
--- a/assets/css/_core/_base.scss
+++ b/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;
diff --git a/assets/css/main.css b/assets/css/main.css
index d1687bfd8..967790931 100644
--- a/assets/css/main.css
+++ b/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
 */
 
 /*
diff --git a/assets/js/theme.ts b/assets/js/theme.ts
index 9e3c96816..c8e7072f4 100644
--- a/assets/js/theme.ts
+++ b/assets/js/theme.ts
@@ -560,7 +560,7 @@ 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",
@@ -568,7 +568,7 @@ function initDetails() {
         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", () => {
diff --git a/exampleSite/content/posts/tests/tab-tests/index.en.md b/exampleSite/content/posts/tests/tab-tests/index.en.md
index 52a151f70..a08d488bf 100644
--- a/exampleSite/content/posts/tests/tab-tests/index.en.md
+++ b/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