From 5b43c2b6a3f802de85c00f3dacfc2752a9fbf81b Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Thu, 28 May 2026 12:56:07 +0800
Subject: [PATCH] fix(tabs): improve tab shortcode rendering and restore sticky
 code header (#772)

* fix(tabs): improve tab shortcode rendering and trim whitespace

* fix(tabs): restore sticky code header for left/right placement
---
 .../content/posts/tabs-comprehensive-test.md   |  2 +-
 assets/scss/pages/single/shortcodes/_tabs.scss |  1 -
 layouts/_shortcodes/fixit-encryptor.html       |  2 +-
 layouts/_shortcodes/tab.html                   |  5 +----
 layouts/_shortcodes/tabs.html                  | 18 ++++++++++--------
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/apps/test/content/posts/tabs-comprehensive-test.md b/apps/test/content/posts/tabs-comprehensive-test.md
index b00b25b5..0e8c25f9 100644
--- a/apps/test/content/posts/tabs-comprehensive-test.md
+++ b/apps/test/content/posts/tabs-comprehensive-test.md
@@ -115,7 +115,7 @@ Nested tab C with a table:
 {{% tab title="Outer Tab 3" %}}
 This tab contains vertical nested tabs:
 
-{{< tabs type="card" vertical=true >}}
+{{< tabs type="card" placement="left" >}}
 
 {{% tab title="Vertical A" %}}
 Content for vertical nested tab A.
diff --git a/assets/scss/pages/single/shortcodes/_tabs.scss b/assets/scss/pages/single/shortcodes/_tabs.scss
index 954c1895..631f6d36 100644
--- a/assets/scss/pages/single/shortcodes/_tabs.scss
+++ b/assets/scss/pages/single/shortcodes/_tabs.scss
@@ -76,7 +76,6 @@ tab-container {
   &[placement='left'],
   &[placement='right'] {
     max-width: 100%;
-    overflow: hidden;
 
     &::part(tablist-wrapper) {
       min-height: 100px;
diff --git a/layouts/_shortcodes/fixit-encryptor.html b/layouts/_shortcodes/fixit-encryptor.html
index 67e74ddf..b1652ead 100644
--- a/layouts/_shortcodes/fixit-encryptor.html
+++ b/layouts/_shortcodes/fixit-encryptor.html
@@ -3,7 +3,7 @@
 
 {{- if $password -}}
   {{- /* Content */ -}}
-  {{- $content := .Inner | .Page.RenderString -}}
+  {{- $content := .Inner | strings.TrimSpace | .Page.RenderString -}}
   {{- /* Content Encryption */ -}}
   {{- dict "Content" $content "Password" $password "Message" $message "IsPartial" true "Page" .Page | partial "plugin/fixit-encryptor.html" -}}
   {{- .Page.Store.Set "hasEncryptor" true -}}
diff --git a/layouts/_shortcodes/tab.html b/layouts/_shortcodes/tab.html
index 15da329a..5435aac5 100644
--- a/layouts/_shortcodes/tab.html
+++ b/layouts/_shortcodes/tab.html
@@ -9,10 +9,7 @@
 {{- $id := dict "Page" .Page | partial "function/id.html" -}}
 {{- $title := .Get "title" -}}
 {{- .Parent.Store.Add "tabs" (slice (dict "title" $title "id" $id)) -}}
-{{- $content := trim .Inner "\r\n" -}}
-{{- /* Remove p tags around complete tab-container structure */ -}}
-{{- $content = $content | replaceRE `<p>(<tab-container[^>]*>[\s\S]*?</button>)</p>` "$1" -}}
 
 {{- /* Tab panel */ -}}
-<div role="tabpanel" aria-labelledby="tab-{{ $id }}" class="tab-panel">{{ $content | safeHTML }}</div>
+<div role="tabpanel" aria-labelledby="tab-{{ $id }}" class="tab-panel">{{ .Inner | strings.TrimSpace | .Page.RenderString }}</div>
 {{- /* EOF */ -}}
diff --git a/layouts/_shortcodes/tabs.html b/layouts/_shortcodes/tabs.html
index a2844cd9..3737a5bf 100644
--- a/layouts/_shortcodes/tabs.html
+++ b/layouts/_shortcodes/tabs.html
@@ -40,14 +40,16 @@
 {{- end -}}
 
 {{- /* Tabs Container */ -}}
-<tab-container default-tab="{{ $defaultTab }}" placement="{{ $placement }}"{{ with $type }} type="{{ . }}"{{ end }}>
-  {{- range $index, $tab := $tabs -}}
-    {{- $title := $tab.title | default (printf "Untitled%v" $index) -}}
-    {{- $id := $tab.id -}}
-    <button class="tab-button" type="button" role="tab" id="tab-{{ $id }}" aria-selected="{{ eq $index $defaultTab }}">{{ $title | $.Page.RenderString }}</button>
-  {{- end -}}
-  {{- .Inner -}}
-</tab-container>
+<div class="shortcode-tabs">
+  <tab-container default-tab="{{ $defaultTab }}" placement="{{ $placement }}"{{ with $type }} type="{{ . }}"{{ end }}>
+    {{- range $index, $tab := $tabs -}}
+      {{- $title := $tab.title | default (printf "Untitled%v" $index) -}}
+      {{- $id := $tab.id -}}
+      <button class="tab-button" type="button" role="tab" id="tab-{{ $id }}" aria-selected="{{ eq $index $defaultTab }}">{{ $title | $.Page.RenderString }}</button>
+    {{- end -}}
+    {{- .Inner | strings.TrimSpace | .Page.RenderString -}}
+  </tab-container>
+</div>
 
 {{- .Page.Store.Set "hasTabs" true -}}