From 05de6f202809bb31e0cbdaab5385bae3a1a877a6 Mon Sep 17 00:00:00 2001
From: Dome <dm@ztfr.de>
Date: Sun, 26 Apr 2026 04:43:04 +0200
Subject: [PATCH] fix(toc): restore correct floating TOC positioning after
 layout refactor

Fix incorrect TOC alignment caused by outdated DOM selector in toc.js.
The content reference element changed during layout refactor, breaking
position calculations for the floating TOC.

Updated contentColumn selector to use .main-wrapper/.container fallback,
ensuring correct left offset and responsive positioning.

Also adds a more robust fallback chain to prevent future regressions
when layout structure changes.
---
 assets/js/toc.js        | 15 ++++++++-------
 inc/zeitfresser-toc.php | 25 +++++++++++++++++++++++++
 single.php              |  4 +++-
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/assets/js/toc.js b/assets/js/toc.js
index 276782b..a710132 100644
--- a/assets/js/toc.js
+++ b/assets/js/toc.js
@@ -1,6 +1,8 @@
 document.addEventListener('DOMContentLoaded', function () {
     var toc = document.getElementById('zeitfresser-floating-toc');
-    var title = document.querySelector('.zeitfresser-article-heading .page-title, .zeitfresser-article-heading .entry-title, .entry-header .entry-title');
+    var title = document.querySelector(
+        '.entry-header .entry-title, .page-title, h1'
+    );
     var progressBar = document.getElementById('zeitfresser-floating-toc-progress');
     var nav = toc ? toc.querySelector('.zeitfresser-floating-toc__nav') : null;
 
@@ -67,12 +69,11 @@ document.addEventListener('DOMContentLoaded', function () {
         var titleRect = title.getBoundingClientRect();
         var scrollTop = window.scrollY || window.pageYOffset || 0;
 
-        var contentColumn = document.querySelector(
-            '.inside-page .main-wrapper > *:first-child, ' +
-            '.inside-page .main-wrapper .primary-content, ' +
-            '.inside-page .main-wrapper #primary, ' +
-            '.inside-page .main-wrapper main'
-        );
+        var contentColumn =
+            document.querySelector('.inside-page .container') ||
+            document.querySelector('#primary') ||
+            document.querySelector('.content-area') ||
+            title;
 
         var sidebar = document.querySelector(
             '.inside-page .main-wrapper > aside, ' +
diff --git a/inc/zeitfresser-toc.php b/inc/zeitfresser-toc.php
index 32e1d97..540f4c3 100644
--- a/inc/zeitfresser-toc.php
+++ b/inc/zeitfresser-toc.php
@@ -9,6 +9,31 @@ if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
+/**
+ * Enqueue TOC script when needed.
+ */
+function zeitfresser_enqueue_toc_assets() {
+
+    if ( ! is_singular( 'post' ) ) {
+        return;
+    }
+
+    if ( ! zeitfresser_has_floating_toc() ) {
+        return;
+    }
+
+    $asset = zeitfresser_asset_versioned('/js/toc.js');
+
+    wp_enqueue_script(
+        'zeitfresser-toc',
+        $asset['url'],
+        [],
+        $asset['version'],
+        true
+    );
+}
+add_action( 'wp_enqueue_scripts', 'zeitfresser_enqueue_toc_assets', 20 );
+
 /**
  * Return whether article TOC output is enabled.
  *
diff --git a/single.php b/single.php
index fde9406..c14c811 100644
--- a/single.php
+++ b/single.php
@@ -17,7 +17,9 @@ $show_hide_related_posts = get_theme_mod(
 <div id="primary" class="inside-page content-area">
     <div class="container">
         <div class="main-wrapper">
-
+            
+            <?php zeitfresser_render_floating_toc(); ?>
+            
             <section class="page-section full-width-view">
                 <div class="detail-content">