From 9197c311f2cac071e339f9929483980a386e3ce8 Mon Sep 17 00:00:00 2001
From: Ivo Oskamp <ivooskamp@oskamp.info>
Date: Mon, 9 Feb 2026 15:11:47 +0100
Subject: [PATCH] Fix responsive navbar overlapping content on smaller screens

Added dynamic padding adjustment that measures the actual navbar height and
applies it to the main content padding-top. This prevents the navbar from
overlapping page content when it becomes taller on narrow screens.

Changes:
- Removed fixed padding-top: 80px from main content
- Added id="main-content" to main element for JavaScript targeting
- Added JavaScript function that measures navbar.offsetHeight
- Function applies dynamic padding-top with 20px buffer for spacing
- Triggers on: page load, window load, window resize (debounced), navbar collapse toggle
- Includes fallback to 80px if measurement fails
- Updated changelog

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/templates/layout/base.html            | 54 ++++++++++++++++++-
 docs/changelog-claude.md                      |  1 +
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/containers/backupchecks/src/templates/layout/base.html b/containers/backupchecks/src/templates/layout/base.html
index 346069b..4a06250 100644
--- a/containers/backupchecks/src/templates/layout/base.html
+++ b/containers/backupchecks/src/templates/layout/base.html
@@ -197,7 +197,7 @@
       </div>
     </nav>
 
-    <main class="{% block main_class %}container content-container{% endblock %}" style="padding-top: 80px;">
+    <main class="{% block main_class %}container content-container{% endblock %}" id="main-content">
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
           <div class="mb-3">
@@ -216,6 +216,58 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+    <script>
+      // Dynamic navbar height adjustment
+      (function () {
+        function adjustContentPadding() {
+          try {
+            var navbar = document.querySelector('.navbar.fixed-top');
+            var mainContent = document.getElementById('main-content');
+            if (!navbar || !mainContent) return;
+
+            // Get actual navbar height
+            var navbarHeight = navbar.offsetHeight;
+
+            // Add small buffer (20px) for visual spacing
+            var paddingTop = navbarHeight + 20;
+
+            // Apply padding to main content
+            mainContent.style.paddingTop = paddingTop + 'px';
+          } catch (e) {
+            // Fallback to 80px if something goes wrong
+            var mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              mainContent.style.paddingTop = '80px';
+            }
+          }
+        }
+
+        // Run on page load
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', adjustContentPadding);
+        } else {
+          adjustContentPadding();
+        }
+
+        // Run after navbar is fully rendered
+        window.addEventListener('load', adjustContentPadding);
+
+        // Run on window resize
+        var resizeTimeout;
+        window.addEventListener('resize', function () {
+          clearTimeout(resizeTimeout);
+          resizeTimeout = setTimeout(adjustContentPadding, 100);
+        });
+
+        // Run when navbar collapse is toggled
+        var navbarCollapse = document.getElementById('navbarNav');
+        if (navbarCollapse) {
+          navbarCollapse.addEventListener('shown.bs.collapse', adjustContentPadding);
+          navbarCollapse.addEventListener('hidden.bs.collapse', adjustContentPadding);
+        }
+      })();
+    </script>
+
     <script>
       (function () {
         function isOverflowing(el) {
diff --git a/docs/changelog-claude.md b/docs/changelog-claude.md
index 5e24347..2bc0cab 100644
--- a/docs/changelog-claude.md
+++ b/docs/changelog-claude.md
@@ -14,6 +14,7 @@ This file documents all changes made to this project via Claude Code.
 
 ### Fixed
 - Fixed Autotask ticket description being set to NULL when resolving tickets via `update_ticket_resolution_safe` by adding "description" to the optional_fields list, ensuring the original description is preserved during PUT operations
+- Fixed responsive navbar overlapping page content on smaller screens by implementing dynamic padding adjustment (JavaScript measures actual navbar height and adjusts main content padding-top automatically on page load, window resize, and navbar collapse toggle events)
 
 ### Changed
 - Updated `docs/changelog.md` with comprehensive v0.1.23 release notes consolidating all changes from 2026-02-06 through 2026-02-08 (Documentation System, Audit Logging, Timezone-Aware Display, Autotask Improvements, Environment Identification, Bug Fixes)