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:
parent
26848998e1
commit
9197c311f2
@ -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) {
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user