fix: prevent timezone field from overflowing container on smaller viewports (#2066)

Closes #2044

frontend/src/components/input/Multiselect.vue

@@ -90,7 +90,10 @@
 							<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
 						</slot>
 					</span>
-					<span class="hint-text">
+					<span
+						v-if="selectPlaceholder.trim()"
+						class="hint-text"
+					>
 						{{ selectPlaceholder }}
 					</span>
 				</BaseButton>
@@ -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 {

frontend/src/views/user/settings/General.vue

@@ -181,6 +181,7 @@
 						:show-empty="true"
 						class="timezone-select"
 						label="label"
+						select-placeholder=""
 						@search="searchTimezones"
 					/>
 				</label>
@@ -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 {