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 {