diff --git a/src/menus/StandardMenu.vue b/src/menus/StandardMenu.vue
index 81b9ff9..5e81c80 100644
--- a/src/menus/StandardMenu.vue
+++ b/src/menus/StandardMenu.vue
@@ -62,8 +62,9 @@ along with this program. If not, see .
{
const appLimit = () => {
const headerStart = document.querySelector('#header .header-start')
const headerEnd = document.querySelector('#header .header-end')
+ const unifiedSearch = document.querySelector('#header .unified-search-input')
const body = document.querySelector('body')
- let size = (headerEnd ? headerEnd.offsetWidth : 0) + 70
+ let totalWidth = body.offsetWidth
+ let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0
+
+ if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) {
+ otherElementsWidth = totalWidth - unifiedSearch.getBoundingClientRect().left
+ }
+
+ let maxWidth = totalWidth - otherElementsWidth
if (headerStart) {
Array.from(headerStart.children).forEach((child) => {
if (child.id !== 'app-menu-container') {
- size += child.offsetWidth
+ maxWidth -= child.offsetWidth
}
})
}
- return Math.max(0, Math.floor((body.offsetWidth - size) / 70))
+ return Math.max(0, Math.floor(maxWidth / 70))
}
const makeStyle = (app) => {
@@ -161,8 +170,9 @@ const computeLists = () => {
}
const reComputeLists = (delay) => {
- window.clearTimeout(resizeTimeout)
- resizeTimeout = window.setTimeout(computeLists, delay || 100)
+ window.clearTimeout(resizeTimeout)
+ resizeTimeout = window.setTimeout(computeLists, delay || 100)
+ document.querySelector('html').classList.toggle('cm-standardmenu-popover', popoverAppList.value.length > 0)
}
onMounted(async () => {
@@ -177,6 +187,7 @@ onMounted(async () => {
setApps(await navStore.getCoreApps())
+ reComputeLists(500)
window.addEventListener('resize', reComputeLists)
})
diff --git a/src/scss/menu.scss b/src/scss/menu.scss
index 29685d2..21e5d6f 100644
--- a/src/scss/menu.scss
+++ b/src/scss/menu.scss
@@ -395,6 +395,16 @@
padding: 10px 0;
}
}
+
+ #header {
+ .unified-search-input {
+ width: 80px !important;
+
+ .unified-search-input__label {
+ display: none;
+ }
+ }
+ }
}
@media screen and (min-width: 1024px) {
@@ -609,3 +619,11 @@ $header-icon-size: 20px;
display: none;
}
}
+
+.cm-standardmenu-popover {
+ #header {
+ .unified-search-input:not(.unified-search-input--mobile) {
+ position: unset !important;
+ }
+ }
+}