diff --git a/vue/src/components/AppNav.vue b/vue/src/components/AppNav.vue index a9e387a..67a2451 100644 --- a/vue/src/components/AppNav.vue +++ b/vue/src/components/AppNav.vue @@ -238,7 +238,7 @@ function handleToggleLayout() { .app-nav__wrapper { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; @@ -246,7 +246,11 @@ function handleToggleLayout() { } .app-nav__title { - margin-right: auto; + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; font-weight: bold; font-size: clamp(0.95rem, 3.5vw, 1.1rem); } @@ -285,8 +289,10 @@ function handleToggleLayout() { } .app-nav__filter { + flex-shrink: 1; + min-width: 0; min-height: 44px; - max-width: clamp(120px, 40vw, 220px); + max-width: clamp(90px, 40vw, 220px); padding: 0.25rem 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; @@ -305,6 +311,7 @@ function handleToggleLayout() { display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 0.5rem;