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>
This commit is contained in:
Ivo Oskamp 2026-02-09 15:11:47 +01:00
parent 26848998e1
commit 9197c311f2
2 changed files with 54 additions and 1 deletions

View File

@ -197,7 +197,7 @@
</div> </div>
</nav> </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) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
<div class="mb-3"> <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 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> <script>
(function () { (function () {
function isOverflowing(el) { function isOverflowing(el) {

View File

@ -14,6 +14,7 @@ This file documents all changes made to this project via Claude Code.
### Fixed ### 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 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 ### 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) - 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)