john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Use inline maxHeight for mobile accordion instead of Tailwind class

Browse source 
The max-h-96 class was only added via JS so Tailwind's scanner never
generated it. Switch to inline style.maxHeight using scrollHeight for
reliable expand/collapse.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow 2026-02-09 17:58:27 +13:00
parent 2bf206ed43
commit 10263a9f24
1 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/js/components/navbar.js
View file

@ -187,7 +187,7 @@ class TractatusNavbar {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="mobile-nav-section-content overflow-hidden max-h-0 transition-all duration-200">
<div class="mobile-nav-section-content overflow-hidden transition-all duration-200" style="max-height:0">
<a href="/architectural-alignment.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Academic Paper</a>
<a href="/architectural-alignment-community.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Community Paper</a>
<a href="/architectural-alignment-policymakers.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Policymakers Paper</a>
@ -204,7 +204,7 @@ class TractatusNavbar {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="mobile-nav-section-content overflow-hidden max-h-0 transition-all duration-200">
<div class="mobile-nav-section-content overflow-hidden transition-all duration-200" style="max-height:0">
<a href="/architecture.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">System Architecture</a>
<a href="/implementer.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">For Implementers</a>
<a href="/village-case-study.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Village Case Study</a>
@ -227,7 +227,7 @@ class TractatusNavbar {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="mobile-nav-section-content overflow-hidden max-h-0 transition-all duration-200">
<div class="mobile-nav-section-content overflow-hidden transition-all duration-200" style="max-height:0">
<a href="/about.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">About Tractatus</a>
<a href="/about/values.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Values</a>
<a href="/korero-counter-arguments.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Counter-Arguments</a>
@ -242,7 +242,7 @@ class TractatusNavbar {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="mobile-nav-section-content overflow-hidden max-h-0 transition-all duration-200">
<div class="mobile-nav-section-content overflow-hidden transition-all duration-200" style="max-height:0">
<a href="/docs.html" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">Documentation</a>
<a href="https://github.com/AgenticGovernance/tractatus-framework" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition">GitHub</a>
</div>
@ -420,14 +420,12 @@ class TractatusNavbar {
if (!btn || !content) return;
btn.addEventListener('click', () => {
const isCollapsed = content.classList.contains('max-h-0');
const isCollapsed = content.style.maxHeight === '0px' || content.style.maxHeight === '';
if (isCollapsed) {
content.classList.remove('max-h-0');
content.classList.add('max-h-96');
content.style.maxHeight = content.scrollHeight + 'px';
if (chevron) chevron.style.transform = 'rotate(180deg)';
} else {
content.classList.remove('max-h-96');
content.classList.add('max-h-0');
content.style.maxHeight = '0px';
if (chevron) chevron.style.transform = '';
}
});
@ -503,8 +501,7 @@ class TractatusNavbar {
});
if (hasActive) {
content.classList.remove('max-h-0');
content.classList.add('max-h-96');
content.style.maxHeight = content.scrollHeight + 'px';
if (chevron) chevron.style.transform = 'rotate(180deg)';
}
});