kbenestad/mdcms
1
0
Fork 0
mirror of https://github.com/kbenestad/mdcms.git synced 2026-06-18 15:24:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix mobile hamburger not showing: replace inline-style+!important hack with a base CSS rule

Browse source 
The mobile header was hidden via mobileHeader.style.display='none' (inline style),
then a dynamically-injected <style> with !important was supposed to reveal it on mobile.
Inline styles and injected stylesheets interact inconsistently across browsers, making
the hamburger invisible on mobile in practice.

Replace with a simple CSS-only approach: add a base rule
'.layout-sidebar .mobile-header { display: none; }' so the existing media-query
'display: flex' override works through normal cascade — no inline style needed,
no !important injection needed.

https://claude.ai/code/session_01HRJsjppKZ2cpmNUAV2NXds
This commit is contained in:
Claude 2026-05-19 04:12:45 +00:00
parent b69af5dfa2
commit a67d731700
No known key found for this signature in database
1 changed files with 2 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/index.html
View file

@ -187,6 +187,8 @@ body {
.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.layout-sidebar .mobile-header { display: none; }
/* ═══════════════════════════════════════════ /* ═══════════════════════════════════════════
SIDEBAR CONTENT SIDEBAR CONTENT
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
@ -2018,7 +2020,6 @@ function fmtDatetime(dtStr) {
const layout = el('div', { className: `layout-sidebar nav-${navPos}` }); const layout = el('div', { className: `layout-sidebar nav-${navPos}` });
const mobileHeader = el('div', { className: 'mobile-header' }); const mobileHeader = el('div', { className: 'mobile-header' });
mobileHeader.style.display = 'none';
const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu' }); const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu' });
hamburger.appendChild(iconEl('menu')); hamburger.appendChild(iconEl('menu'));
const mobileName = el('span', { className: 'sidebar-sitename', textContent: config.sitename || 'MD-CMS' }); const mobileName = el('span', { className: 'sidebar-sitename', textContent: config.sitename || 'MD-CMS' });
@ -2028,10 +2029,6 @@ function fmtDatetime(dtStr) {
} }
mobileHeader.appendChild(mobileName); mobileHeader.appendChild(mobileName);
const mobileStyle = document.createElement('style');
mobileStyle.textContent = `@media (max-width: 768px) { .layout-sidebar .mobile-header { display: flex !important; } }`;
document.head.appendChild(mobileStyle);
const overlay = el('div', { className: 'mobile-overlay' }); const overlay = el('div', { className: 'mobile-overlay' });
overlay.addEventListener('click', () => closeMobileMenu()); overlay.addEventListener('click', () => closeMobileMenu());