From 19cfaedf1fea9b4b7613857c611bd9b0033e141f Mon Sep 17 00:00:00 2001
From: Julio Estrada <estradacjulio@gmail.com>
Date: Fri, 6 Feb 2026 17:56:03 -0500
Subject: [PATCH] templates: UX refinements

- Remove font size controls (slider, selector menu)
- Simplify theme toggle (remove label, fix icon swap logic)
- Add no-transitions class to prevent flash on initial load
- Add smooth theme transition rules
- Improve sidebar resize handle (wider hit area, visual indicator)
- Enhance search with debounced input, highlight, clear button, session persistence, no-results message
- Fix breadcrumb navigation using tree-path lookup
- Add overscroll-behavior: contain to sidebar nav
- Remove sidebar subtitle
- Fix source table line-height for proper symbol rendering
- Remove empty Line column header
---
 gcovr-templates/html/base.html |  60 +----
 gcovr-templates/html/gcovr.js  | 330 +++++++++++++++----------
 gcovr-templates/html/style.css | 427 ++++++++-------------------------
 3 files changed, 316 insertions(+), 501 deletions(-)

diff --git a/gcovr-templates/html/base.html b/gcovr-templates/html/base.html
index cc5fe53..8a2a934 100644
--- a/gcovr-templates/html/base.html
+++ b/gcovr-templates/html/base.html
@@ -9,17 +9,13 @@
     <script>
       // Apply theme and font size immediately to prevent flash
       (function() {
+        document.documentElement.classList.add('no-transitions');
+
         var saved = localStorage.getItem('gcovr-theme');
         var theme = (saved === 'light' || saved === 'dark') ? saved
           : window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
         document.documentElement.setAttribute('data-theme', theme);
 
-        // Apply saved font size
-        var fontSize = localStorage.getItem('gcovr-font-size');
-        if (fontSize) {
-          var baseSize = 15 * (parseInt(fontSize, 10) / 100);
-          document.documentElement.style.setProperty('--font-size-base', baseSize + 'px');
-        }
       })();
     </script>
     <style type="text/css">
@@ -46,11 +42,11 @@
           </div>
           <div class="sidebar-title-group">
             <span class="sidebar-library">{{info.head}}</span>
-            <span class="sidebar-subtitle">GCC Code Coverage</span>
           </div>
         </div>
         <div class="sidebar-search">
           <input type="text" id="file-search" placeholder="Search files..." autocomplete="off">
+          <button class="search-clear" id="search-clear" type="button" aria-label="Clear search">&times;</button>
         </div>
         <div class="tree-controls">
           <button class="tree-control-btn" id="expand-all" title="Expand all">
@@ -67,52 +63,6 @@
           <div class="tree-loading">Loading file tree...</div>
           {% endblock %}
         </nav>
-        <div class="sidebar-footer no-expand">
-          <div class="font-size-control" id="font-size-control" title="Adjust text size">
-            <button class="font-size-a font-size-small" id="font-decrease" title="Decrease text size">A</button>
-            <div class="font-size-slider-container">
-              <div class="font-size-ticks">
-                <span class="tick"></span>
-                <span class="tick"></span>
-                <span class="tick middle"></span>
-                <span class="tick"></span>
-                <span class="tick"></span>
-              </div>
-              <input type="range" id="font-size-slider" min="0" max="4" value="2" step="1" class="font-size-slider">
-            </div>
-            <button class="font-size-a font-size-large" id="font-increase" title="Increase text size">A</button>
-          </div>
-          <div class="font-size-selector" id="font-size-selector">
-            <button class="font-size-toggle" id="font-size-toggle" title="Adjust text size">A</button>
-            <div class="font-size-menu" id="font-size-menu">
-              <button class="font-size-option" data-size="0">
-                <span class="size-label">80%</span>
-                <svg class="check" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>
-              </button>
-              <button class="font-size-option" data-size="1">
-                <span class="size-label">90%</span>
-                <svg class="check" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>
-              </button>
-              <button class="font-size-option" data-size="2">
-                <span class="size-label">100%</span>
-                <svg class="check" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>
-              </button>
-              <button class="font-size-option" data-size="3">
-                <span class="size-label">110%</span>
-                <svg class="check" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>
-              </button>
-              <button class="font-size-option" data-size="4">
-                <span class="size-label">120%</span>
-                <svg class="check" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>
-              </button>
-            </div>
-          </div>
-          <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
-            <svg class="icon-moon" viewBox="0 0 16 16" fill="currentColor"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>
-            <svg class="icon-sun" viewBox="0 0 16 16" fill="currentColor"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/></svg>
-            <span class="theme-label">Theme</span>
-          </button>
-        </div>
         <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
       </aside>
 
@@ -131,6 +81,10 @@
           <div class="header-actions">
             {% block navigation %}{% endblock %}
           </div>
+          <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
+            <svg class="icon-moon" viewBox="0 0 16 16" fill="currentColor"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>
+            <svg class="icon-sun" viewBox="0 0 16 16" fill="currentColor"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/></svg>
+          </button>
         </header>
 
         <div class="content-wrapper">
diff --git a/gcovr-templates/html/gcovr.js b/gcovr-templates/html/gcovr.js
index f22423f..27fa1eb 100644
--- a/gcovr-templates/html/gcovr.js
+++ b/gcovr-templates/html/gcovr.js
@@ -6,7 +6,6 @@
   // Wait for DOM ready
   document.addEventListener('DOMContentLoaded', function() {
     initTheme();
-    initFontSize();
     initSidebar();
     initSidebarResize();
     initMobileMenu();
@@ -16,6 +15,14 @@
     initSorting();
     initToggleButtons();
     initTreeControls();
+
+    // Re-enable transitions after all init (including search restore)
+    // has completed so the first paint is the final state
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        document.documentElement.classList.remove('no-transitions');
+      });
+    });
   });
 
   // ===========================================
@@ -42,14 +49,20 @@
 
   function initBreadcrumbs() {
     var currentSpan = document.querySelector('.breadcrumb .current');
-    if (!currentSpan || !window.GCOVR_TREE_DATA) return;
+    if (!currentSpan || !window.GCOVR_TREE_DATA) {
+      if (currentSpan) currentSpan.classList.add('ready');
+      return;
+    }
 
     // Find current page in tree by its HTML filename — this is unambiguous
     // since each page only appears once in the tree.
     var currentPage = window.location.pathname.split('/').pop() || 'index.html';
     var treePath = findPathInTree(window.GCOVR_TREE_DATA, currentPage);
 
-    if (!treePath || treePath.length === 0) return;
+    if (!treePath || treePath.length === 0) {
+      currentSpan.classList.add('ready');
+      return;
+    }
 
     // Build breadcrumb from the tree path (ancestor nodes → current node)
     var fragment = document.createDocumentFragment();
@@ -83,6 +96,7 @@
 
     currentSpan.innerHTML = '';
     currentSpan.appendChild(fragment);
+    currentSpan.classList.add('ready');
 
     // Update source-filename to match breadcrumb path
     var sourceFilename = document.querySelector('.source-filename');
@@ -97,7 +111,6 @@
 
   function initTheme() {
     const toggle = document.getElementById('theme-toggle');
-    const label = toggle ? toggle.querySelector('.theme-label') : null;
     const iconSun = toggle ? toggle.querySelector('.icon-sun') : null;
     const iconMoon = toggle ? toggle.querySelector('.icon-moon') : null;
 
@@ -115,11 +128,8 @@
     // Apply theme to document
     function applyTheme(theme) {
       document.documentElement.setAttribute('data-theme', theme);
-      if (label) {
-        label.textContent = theme.charAt(0).toUpperCase() + theme.slice(1);
-      }
-      if (iconSun) iconSun.style.display = (theme === 'light') ? 'block' : 'none';
-      if (iconMoon) iconMoon.style.display = (theme === 'dark') ? 'block' : 'none';
+      if (iconSun) iconSun.style.display = (theme === 'dark') ? 'block' : 'none';
+      if (iconMoon) iconMoon.style.display = (theme === 'light') ? 'block' : 'none';
     }
 
     // Apply current theme
@@ -144,101 +154,6 @@
     }
   }
 
-  // ===========================================
-  // Font Size Control
-  // ===========================================
-
-  function initFontSize() {
-    var slider = document.getElementById('font-size-slider');
-    var decreaseBtn = document.getElementById('font-decrease');
-    var increaseBtn = document.getElementById('font-increase');
-    var fontSizeSelector = document.getElementById('font-size-selector');
-    var fontSizeToggle = document.getElementById('font-size-toggle');
-    var fontSizeMenu = document.getElementById('font-size-menu');
-    var fontSizeOptions = fontSizeMenu ? fontSizeMenu.querySelectorAll('.font-size-option') : [];
-    if (!slider) return;
-
-    // Font size steps: 80%, 90%, 100%, 110%, 120% (100% is middle)
-    var sizes = [80, 90, 100, 110, 120];
-
-    // Load saved preference
-    var saved = localStorage.getItem('gcovr-font-size');
-    var currentIndex = 2; // default to 100% (index 2)
-    if (saved) {
-      var savedIndex = sizes.indexOf(parseInt(saved, 10));
-      if (savedIndex !== -1) {
-        currentIndex = savedIndex;
-      }
-    }
-
-    function updateMenuState(index) {
-      fontSizeOptions.forEach(function(opt) {
-        var optIndex = parseInt(opt.getAttribute('data-size'), 10);
-        opt.classList.toggle('active', optIndex === index);
-      });
-    }
-
-    function applyFontSize(index) {
-      currentIndex = index;
-      var size = sizes[index];
-      var baseSize = 15 * (size / 100);
-      document.documentElement.style.setProperty('--font-size-base', baseSize + 'px');
-      slider.value = index;
-      localStorage.setItem('gcovr-font-size', size);
-      updateMenuState(index);
-    }
-
-    // Set initial slider position and apply font size
-    applyFontSize(currentIndex);
-
-    // Listen for slider changes
-    slider.addEventListener('input', function() {
-      applyFontSize(parseInt(this.value, 10));
-    });
-
-    // Decrease button (small A)
-    if (decreaseBtn) {
-      decreaseBtn.addEventListener('click', function() {
-        if (currentIndex > 0) {
-          applyFontSize(currentIndex - 1);
-        }
-      });
-    }
-
-    // Increase button (large A)
-    if (increaseBtn) {
-      increaseBtn.addEventListener('click', function() {
-        if (currentIndex < sizes.length - 1) {
-          applyFontSize(currentIndex + 1);
-        }
-      });
-    }
-
-    // Font size selector menu (collapsed state)
-    if (fontSizeToggle && fontSizeSelector) {
-      fontSizeToggle.addEventListener('click', function(e) {
-        e.stopPropagation();
-        fontSizeSelector.classList.toggle('open');
-      });
-
-      fontSizeOptions.forEach(function(opt) {
-        opt.addEventListener('click', function(e) {
-          e.stopPropagation();
-          var sizeIndex = parseInt(this.getAttribute('data-size'), 10);
-          applyFontSize(sizeIndex);
-          fontSizeSelector.classList.remove('open');
-        });
-      });
-
-      // Close menu when clicking outside
-      document.addEventListener('click', function(e) {
-        if (!fontSizeSelector.contains(e.target)) {
-          fontSizeSelector.classList.remove('open');
-        }
-      });
-    }
-  }
-
   // ===========================================
   // Tree Controls (Expand/Collapse All)
   // ===========================================
@@ -495,6 +410,9 @@
         collapseSingleChildDirs(window.GCOVR_TREE_DATA);
         deduplicateTree(window.GCOVR_TREE_DATA);
         renderTree(treeContainer, window.GCOVR_TREE_DATA);
+        // Re-run breadcrumbs and search now that the tree exists
+        initBreadcrumbs();
+        initSearch();
       })
       .catch(function(err) {
         console.log('tree.json not found, using static sidebar');
@@ -742,8 +660,8 @@
       // Make entire header clickable to expand/collapse
       header.style.cursor = 'pointer';
       header.addEventListener('click', function(e) {
-        // Don't toggle if clicking a link
-        if (e.target.tagName === 'A') return;
+        // If clicking directly on a link, let it navigate
+        if (e.target.closest('a')) return;
         e.preventDefault();
         var isExpanded = div.classList.toggle('expanded');
         toggle.textContent = isExpanded ? '−' : '+';
@@ -772,10 +690,6 @@
     var tooltipText = cleanPathName(item.fullPath || item.name);
     var label = document.createElement('span');
     label.className = 'tree-label';
-    // Apply coverage class for coloring
-    if (item.coverageClass) {
-      label.classList.add(item.coverageClass);
-    }
     label.title = tooltipText;
     if (item.link) {
       var link = document.createElement('a');
@@ -814,21 +728,195 @@
 
   function initSearch() {
     const searchInput = document.getElementById('file-search');
-    if (!searchInput) return;
+    const fileTree = document.getElementById('file-tree');
+    const clearBtn = document.getElementById('search-clear');
+    const searchContainer = searchInput ? searchInput.closest('.sidebar-search') : null;
+    if (!searchInput || !fileTree) return;
+
+    // Store pre-search expanded state so we can restore it
+    var preSearchExpanded = null;
+
+    // Create no-results message
+    var noResults = document.createElement('div');
+    noResults.className = 'search-no-results';
+    noResults.textContent = 'No matching files';
+    noResults.style.display = 'none';
+    fileTree.appendChild(noResults);
+
+    function updateClearButton() {
+      if (searchContainer) {
+        searchContainer.classList.toggle('has-query', searchInput.value.trim() !== '');
+      }
+    }
 
+    // Clear button
+    if (clearBtn) {
+      clearBtn.addEventListener('click', function() {
+        searchInput.value = '';
+        sessionStorage.removeItem('gcovr-search');
+        updateClearButton();
+        performSearch('');
+        searchInput.focus();
+      });
+    }
+
+    var debounceTimer = null;
     searchInput.addEventListener('input', function() {
-      const query = this.value.toLowerCase().trim();
-      const treeItems = document.querySelectorAll('.tree-item');
-
-      treeItems.forEach(function(item) {
-        const label = item.querySelector('.tree-label');
-        if (label) {
-          const text = label.textContent.toLowerCase();
-          const matches = query === '' || text.includes(query);
-          item.style.display = matches ? '' : 'none';
+      updateClearButton();
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function() {
+        var val = searchInput.value;
+        if (val.trim() !== '') {
+          sessionStorage.setItem('gcovr-search', val);
+        } else {
+          sessionStorage.removeItem('gcovr-search');
         }
-      });
+        performSearch(val);
+      }, 150);
     });
+
+    // Restore search state from sessionStorage on page load (synchronous
+    // since initFileTree has already built the tree before initSearch runs)
+    var savedSearch = sessionStorage.getItem('gcovr-search');
+    if (savedSearch) {
+      searchInput.value = savedSearch;
+      updateClearButton();
+      performSearch(savedSearch);
+    }
+
+    function performSearch(value) {
+      var query = value.toLowerCase().trim();
+      var allItems = fileTree.querySelectorAll('.tree-item');
+
+      // Clear all highlights
+      fileTree.querySelectorAll('.search-highlight').forEach(function(mark) {
+        var parent = mark.parentNode;
+        parent.replaceChild(document.createTextNode(mark.textContent), mark);
+        parent.normalize();
+      });
+
+      // If query is empty, restore original state
+      if (query === '') {
+        noResults.style.display = 'none';
+        allItems.forEach(function(item) {
+          item.style.display = '';
+          item.classList.remove('search-match');
+        });
+        // Restore pre-search expanded state
+        if (preSearchExpanded !== null) {
+          allItems.forEach(function(item) {
+            var path = item.getAttribute('data-tree-path');
+            var toggle = item.querySelector(':scope > .tree-item-header > .tree-folder-toggle');
+            if (toggle) {
+              if (preSearchExpanded.indexOf(path) >= 0) {
+                item.classList.add('expanded');
+                toggle.textContent = '\u2212';
+              } else {
+                item.classList.remove('expanded');
+                toggle.textContent = '+';
+              }
+            }
+          });
+          preSearchExpanded = null;
+        }
+        return;
+      }
+
+      // Save expanded state before first search
+      if (preSearchExpanded === null) {
+        preSearchExpanded = [];
+        allItems.forEach(function(item) {
+          if (item.classList.contains('expanded')) {
+            preSearchExpanded.push(item.getAttribute('data-tree-path'));
+          }
+        });
+      }
+
+      // Determine which items match (check full path and display name)
+      var matchSet = new Set();
+
+      allItems.forEach(function(item) {
+        var path = (item.getAttribute('data-tree-path') || '').toLowerCase();
+        var label = item.querySelector(':scope > .tree-item-header > .tree-label');
+        var text = label ? label.textContent.toLowerCase() : '';
+        if (path.includes(query) || text.includes(query)) {
+          matchSet.add(item);
+        }
+      });
+
+      // Also mark all ancestor items of matches as visible
+      var visibleSet = new Set(matchSet);
+      matchSet.forEach(function(item) {
+        var parent = item.parentElement;
+        while (parent && parent !== fileTree) {
+          if (parent.classList && parent.classList.contains('tree-item')) {
+            visibleSet.add(parent);
+          }
+          parent = parent.parentElement;
+        }
+      });
+
+      // Apply visibility, expand parents of matches, highlight text
+      var anyVisible = false;
+      allItems.forEach(function(item) {
+        var isVisible = visibleSet.has(item);
+        item.style.display = isVisible ? '' : 'none';
+        item.classList.toggle('search-match', matchSet.has(item));
+
+        if (isVisible) {
+          anyVisible = true;
+          // Auto-expand folders that contain matches
+          var toggle = item.querySelector(':scope > .tree-item-header > .tree-folder-toggle');
+          if (toggle && visibleSet.has(item) && !matchSet.has(item) || (toggle && matchSet.has(item) && item.classList.contains('is-folder'))) {
+            item.classList.add('expanded');
+            toggle.textContent = '\u2212';
+          }
+        }
+
+        // Highlight matched text in label
+        if (matchSet.has(item)) {
+          var label = item.querySelector(':scope > .tree-item-header > .tree-label');
+          if (label) {
+            highlightText(label, query);
+          }
+        }
+      });
+
+      noResults.style.display = anyVisible ? 'none' : '';
+    }
+
+    function highlightText(container, query) {
+      // Walk text nodes inside the label (may be inside an <a> tag)
+      var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
+      var textNodes = [];
+      while (walker.nextNode()) {
+        textNodes.push(walker.currentNode);
+      }
+      textNodes.forEach(function(node) {
+        var text = node.textContent;
+        var lowerText = text.toLowerCase();
+        var idx = lowerText.indexOf(query);
+        if (idx === -1) return;
+
+        var frag = document.createDocumentFragment();
+        var lastIdx = 0;
+        while (idx !== -1) {
+          if (idx > lastIdx) {
+            frag.appendChild(document.createTextNode(text.substring(lastIdx, idx)));
+          }
+          var mark = document.createElement('mark');
+          mark.className = 'search-highlight';
+          mark.textContent = text.substring(idx, idx + query.length);
+          frag.appendChild(mark);
+          lastIdx = idx + query.length;
+          idx = lowerText.indexOf(query, lastIdx);
+        }
+        if (lastIdx < text.length) {
+          frag.appendChild(document.createTextNode(text.substring(lastIdx)));
+        }
+        node.parentNode.replaceChild(frag, node);
+      });
+    }
   }
 
   // ===========================================
diff --git a/gcovr-templates/html/style.css b/gcovr-templates/html/style.css
index cd70c58..660c393 100644
--- a/gcovr-templates/html/style.css
+++ b/gcovr-templates/html/style.css
@@ -83,13 +83,13 @@
   --font-mono: 'SF Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
 
   /* Font sizes - base scale (can be adjusted via JS) */
-  --font-size-base: 15px;
+  --font-size-base: 16px;
   --font-size-xs: calc(var(--font-size-base) * 0.75);
   --font-size-sm: calc(var(--font-size-base) * 0.867);
   --font-size-md: var(--font-size-base);
   --font-size-lg: calc(var(--font-size-base) * 1.067);
   --font-size-xl: calc(var(--font-size-base) * 1.2);
-  --font-size-code: calc(var(--font-size-base) * 0.9);
+  --font-size-code: calc(var(--font-size-base) * 0.9375);
 
   /* ===========================================
      Radius
@@ -162,9 +162,17 @@
   --code-string: #0550ae;
 }
 
+/* Suppress transitions on initial load to prevent flash */
+html.no-transitions,
+html.no-transitions *,
+html.no-transitions *::before,
+html.no-transitions *::after {
+  transition: none !important;
+}
+
 /* Smooth theme transitions */
 body, .sidebar, .main-content, .main-header, .main-footer,
-.sidebar-header, .sidebar-nav, .sidebar-footer,
+.sidebar-header, .sidebar-nav,
 .summary-card, .file-list-container, .source-container,
 .tree-item-header, .coverage-badge, .tree-coverage,
 .btn, .nav-link, input {
@@ -230,7 +238,6 @@ a:hover {
   flex-direction: column;
   z-index: 100;
   transition: width var(--transition-normal);
-  overflow: hidden;
 }
 
 /* Collapsed state */
@@ -248,17 +255,29 @@ a:hover {
 .sidebar-resize-handle {
   position: absolute;
   top: 0;
-  right: -3px;
-  width: 6px;
+  left: 100%;
+  width: 16px;
   height: 100%;
   cursor: col-resize;
   z-index: 101;
+}
+
+.sidebar-resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 3px;
+  height: 100%;
+  border-radius: 1.5px;
   background: transparent;
+  transform: translateX(-50%);
   transition: background var(--transition-fast);
 }
 
-.sidebar-resize-handle:hover {
+.sidebar-resize-handle:hover::after {
   background: var(--accent-brand);
+  opacity: 0.5;
 }
 
 .sidebar.collapsed .sidebar-resize-handle {
@@ -309,7 +328,7 @@ body.sidebar-resizing .main-content {
 }
 
 .sidebar-logo .boost-wordmark {
-  height: 32px;
+  height: 28px;
   width: auto;
   flex-shrink: 0;
   transition: transform var(--transition-fast);
@@ -423,11 +442,12 @@ body.sidebar-resizing .main-content {
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
+  position: relative;
 }
 
 .sidebar-search input {
   width: 100%;
-  padding: 8px 12px;
+  padding: 8px 28px 8px 12px;
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
@@ -437,6 +457,31 @@ body.sidebar-resizing .main-content {
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
+.search-clear {
+  position: absolute;
+  right: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  display: none;
+}
+
+.search-clear:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.sidebar-search.has-query .search-clear {
+  display: block;
+}
+
 .sidebar-search input:focus {
   border-color: var(--accent-blue);
   box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
@@ -446,6 +491,20 @@ body.sidebar-resizing .main-content {
   color: var(--text-muted);
 }
 
+.search-highlight {
+  background: var(--accent-yellow, #e3b341);
+  color: var(--bg-primary);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.search-no-results {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+}
+
 /* Hide elements when collapsed (show on hover) */
 .sidebar.collapsed .sidebar-search,
 .sidebar.collapsed .tree-controls,
@@ -461,47 +520,9 @@ body.sidebar-resizing .main-content {
   pointer-events: auto;
 }
 
-/* Theme toggle stays visible when collapsed, just hide label */
-.sidebar.collapsed .sidebar-footer {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  overflow: visible;
-  width: 100%;
-}
-
-.sidebar.collapsed .theme-toggle {
-  width: 36px;
-  height: 36px;
-  padding: 0;
-}
-
-.sidebar.collapsed .theme-label {
-  display: none;
-}
-
-.sidebar.collapsed.hover-expand .sidebar-footer {
-  flex-direction: column;
-  align-items: stretch;
-  padding: 16px;
-}
-
-.sidebar.collapsed.hover-expand .theme-toggle {
-  width: 100%;
-  height: 36px;
-  padding: 0 12px;
-}
-
-.sidebar.collapsed.hover-expand .theme-label {
-  display: inline;
-}
-
-/* Theme Toggle */
+/* Theme Toggle (in header) */
 .theme-toggle {
-  width: 100%;
+  width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
@@ -511,276 +532,26 @@ body.sidebar-resizing .main-content {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   transition: all var(--transition-fast);
-  padding: 0 12px;
+  padding: 0;
+  flex-shrink: 0;
 }
 
 .theme-toggle:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
-  border-color: var(--text-muted);
 }
 
 .theme-toggle svg {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
 }
 
 /* Theme icons - visibility managed by JS */
 .theme-toggle .icon-sun { display: none; }
 .theme-toggle .icon-moon { display: none; }
 
-/* ===========================================
-   Font Size Control
-   =========================================== */
-.font-size-control {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 12px;
-  margin-bottom: 8px;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  min-width: 0;
-}
-
-.font-size-a {
-  color: var(--text-primary);
-  font-weight: 600;
-  line-height: 1;
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition: color var(--transition-fast), background var(--transition-fast);
-}
-
-.font-size-a:hover {
-  color: var(--accent-brand);
-  background: var(--bg-hover);
-}
-
-.font-size-a:active {
-  transform: scale(0.95);
-}
-
-.font-size-small {
-  font-size: 12px;
-}
-
-.font-size-large {
-  font-size: 20px;
-}
-
-.font-size-slider-container {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  height: 24px;
-  display: flex;
-  align-items: center;
-}
-
-.font-size-ticks {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  transform: translateY(-50%);
-  pointer-events: none;
-  padding: 0 2px;
-}
-
-.font-size-ticks .tick {
-  width: 1px;
-  height: 10px;
-  background: var(--text-muted);
-  opacity: 0.5;
-}
-
-.font-size-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 2px;
-  background: var(--text-muted);
-  border-radius: 1px;
-  outline: none;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-
-.font-size-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  background: var(--bg-primary);
-  border: 2px solid var(--border-color);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.font-size-slider::-webkit-slider-thumb:hover {
-  border-color: var(--accent-brand);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.font-size-slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  background: var(--bg-primary);
-  border: 2px solid var(--border-color);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-.font-size-slider::-moz-range-thumb:hover {
-  border-color: var(--accent-brand);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.font-size-slider::-moz-range-track {
-  height: 2px;
-  background: var(--text-muted);
-  border-radius: 1px;
-}
-
-/* Font Size Selector (collapsed state button + menu) */
-.font-size-selector {
-  position: relative;
-  display: none;
-}
-
-.font-size-toggle {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-tertiary);
-  border: none;
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-
-.font-size-toggle:hover {
-  background: var(--bg-hover);
-  color: var(--accent-brand);
-}
-
-.font-size-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(4px);
-  margin-bottom: 8px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
-  z-index: 200;
-  min-width: 80px;
-}
-
-.font-size-selector.open .font-size-menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateX(-50%) translateY(0);
-}
-
-.font-size-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 10px;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.font-size-option:hover {
-  background: var(--bg-hover);
-}
-
-.font-size-option .check {
-  width: 14px;
-  height: 14px;
-  opacity: 0;
-  color: var(--accent-brand);
-}
-
-.font-size-option.active .check {
-  opacity: 1;
-}
-
-/* Hide font-size-control when collapsed, show font-size-selector */
-.sidebar.collapsed .font-size-control {
-  display: none;
-}
-
-.sidebar.collapsed .font-size-selector {
-  display: block;
-}
-
-/* Position font-size menu to open to the right when collapsed */
-.sidebar.collapsed .font-size-menu {
-  bottom: 0;
-  left: 100%;
-  top: auto;
-  transform: translateX(8px) translateY(0);
-  margin-bottom: 0;
-}
-
-.sidebar.collapsed .font-size-selector.open .font-size-menu {
-  transform: translateX(8px) translateY(0);
-}
-
-.sidebar.collapsed.hover-expand .font-size-control {
-  display: flex;
-}
-
-.sidebar.collapsed.hover-expand .font-size-selector {
-  display: none;
-}
-
 /* Theme Selector Dropdown */
-.theme-label {
-  font-size: var(--font-size-xs);
-  white-space: nowrap;
-}
 
 /* Tree Controls */
 .tree-controls {
@@ -818,27 +589,11 @@ body.sidebar-resizing .main-content {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  overscroll-behavior: contain;
   padding: 8px 0;
   scrollbar-gutter: stable;
 }
 
-.sidebar-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-tertiary);
-  margin-top: auto;
-}
-
-.sidebar-footer .theme-toggle {
-  width: 100%;
-  justify-content: center;
-  gap: 8px;
-}
-
-.theme-label {
-  font-size: var(--font-size-xs);
-  color: var(--text-secondary);
-}
 
 .coverage-summary-mini {
   display: flex;
@@ -1078,7 +833,7 @@ body.sidebar-resizing .main-content {
   align-items: center;
   gap: 16px;
   margin: 12px 12px 0 0;
-  padding: 12px 24px;
+  padding: 12px 10px 12px 24px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
@@ -1102,7 +857,7 @@ body.sidebar-resizing .main-content {
 }
 
 .breadcrumb a {
-  color: var(--text-secondary);
+  color: var(--accent-blue);
 }
 
 .breadcrumb a:hover {
@@ -1116,6 +871,11 @@ body.sidebar-resizing .main-content {
 
 .breadcrumb .current {
   color: var(--text-primary);
+  visibility: hidden;
+}
+
+.breadcrumb .current.ready {
+  visibility: visible;
 }
 
 .breadcrumb-home {
@@ -1149,9 +909,10 @@ body.sidebar-resizing .main-content {
 .content-wrapper {
   flex: 1;
   padding: 24px;
-  max-width: 1600px;
+  padding-right: 12px;
+  padding-left: 0;
   width: 100%;
-  margin: 0 auto;
+  margin-left: 0;
 }
 
 .main-footer {
@@ -1603,8 +1364,8 @@ body.sidebar-resizing .main-content {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--font-mono);
-  font-size: var(--font-size-xs);
-  line-height: 1.5;
+  font-size: var(--font-size-code);
+  line-height: 1.2;
 }
 
 .source-table thead {
@@ -1716,12 +1477,23 @@ body.sidebar-resizing .main-content {
 
 .branch-summary, .condition-summary, .decision-summary, .call-summary {
   cursor: pointer;
-  padding: 2px 4px;
+  padding: 2px 6px;
   border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
 }
 
 .branch-summary:hover, .condition-summary:hover, .decision-summary:hover, .call-summary:hover {
   background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--text-muted);
 }
 
 .branch-popup, .condition-popup, .decision-popup, .call-popup {
@@ -1737,6 +1509,7 @@ body.sidebar-resizing .main-content {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   font-size: var(--font-size-xs);
   line-height: 1.6;
+  text-align: left;
 }
 
 .function-name {