Mobile Version and Menu

[OzzieHouso]

After manually installing wiki.js I have been adding my content etc, however when I visit my website on mobile device the layout is messed up. Here are my findings for these issues.

• when logged in the header menu isn’t fully visible, at least the user avatar can’t be fully seen or interacted with.
• when logged in and I get to administration panel, the side menu cannot be closed, and you obviously can’t see what your doing because of this.
• when logged in, visiting profile same as above. The side menu cannot be closed.

Turning my phone sideways with auto rotate turned off, it doesn’t help either as the layout is squished.

I use an iPhone 14, if it makes any difference.

[safroalex]

Same issue here.
Wiki.js 2.5.308

[safroalex]

@NGPixel

[safroalex]

@OzzieHouso
CSS Override

`
@media (max-width:600px){
/* активируется только при >4 иконок */
.nav-header-inner.nav-crowded { overflow: visible !important; }

.nav-header-inner .v-toolbar__content.toolbar-crowded{
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.nav-header-inner .v-toolbar__content.toolbar-crowded .spacer{ display: none !important; }
.nav-header-inner .v-toolbar__content.toolbar-crowded .v-divider{ display: none !important; }
}
`

Head HTML Injection

<script> (function () { function applyCrowded() { document.querySelectorAll('.nav-header-inner .v-toolbar__content').forEach(function(tb){ var header = tb.closest('.nav-header-inner'); var count = Array.from(tb.querySelectorAll('.v-btn')).filter(function(b){ return b.offsetParent !== null; }).length; if (count > 4) { tb.classList.add('toolbar-crowded'); if (header) header.classList.add('nav-crowded'); } else { tb.classList.remove('toolbar-crowded'); if (header) header.classList.remove('nav-crowded'); } }); } document.addEventListener('DOMContentLoaded', applyCrowded); var mo = new MutationObserver(applyCrowded); mo.observe(document.documentElement, {subtree:true, childList:true}); window.addEventListener('resize', applyCrowded); })(); </script>