diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue index 5b753dbeb..ec75b2a2c 100644 --- a/frontend/src/components/input/Multiselect.vue +++ b/frontend/src/components/input/Multiselect.vue @@ -90,7 +90,10 @@ {{ label !== '' ? data[label] : data }} - + {{ selectPlaceholder }} @@ -460,6 +463,7 @@ function focus() { .multiselect { inline-size: 100%; position: relative; + container-type: inline-size; .control.is-loading::after { inset-block-start: .75rem; @@ -539,11 +543,13 @@ function focus() { border-block-start: none; max-block-size: 50vh; - overflow-x: auto; + overflow: hidden auto; position: absolute; z-index: 100; - max-inline-size: 100%; - min-inline-size: 100%; + inset-inline: 0; + inline-size: 100%; + box-sizing: border-box; + clip-path: inset(0); } .search-results-inline { @@ -564,9 +570,17 @@ function focus() { color: var(--grey-800); display: flex; - justify-content: space-between; align-items: center; overflow: hidden; + max-inline-size: 100%; + box-sizing: border-box; + position: relative; + + > span:first-child { + overflow: hidden; + min-inline-size: 0; + flex: 1; + } &:focus, &:hover { diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue index 6ee11b668..9643f1de8 100644 --- a/frontend/src/views/user/settings/General.vue +++ b/frontend/src/views/user/settings/General.vue @@ -181,6 +181,7 @@ :show-empty="true" class="timezone-select" label="label" + select-placeholder="" @search="searchTimezones" /> @@ -630,6 +631,10 @@ async function updateSettings() { .timezone-select { min-inline-size: 200px; flex-grow: 1; + + @media screen and (max-width: $tablet) { + min-inline-size: unset; + } } .section-block + .section-block {