From 3bf0f91cf0095fb13af4540177d13d0ecf9677d0 Mon Sep 17 00:00:00 2001
From: Arthur <contact@creeperkatze.dev>
Date: Tue, 12 May 2026 19:45:26 +0200
Subject: [PATCH] fix(app): prevent browse controls from wrapping (#6080)

* Prevent browse filter from wrapping

* Remove unnecessary styling

* Only expand width when required

* Update web variant styling
---
 packages/ui/src/layouts/shared/browse-tab/layout.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index df4c60328..784586e78 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -99,7 +99,11 @@ const messages = defineMessages({
 		<Combobox
 			:model-value="ctx.effectiveCurrentSortType.value"
 			:options="sortOptions"
-			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[16rem]'"
+			:class="
+				ctx.variant === 'web'
+					? '!w-[16rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[16rem] min-w-max max-w-full'
+			"
 			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
 		>
 			<template #prefix>
@@ -112,7 +116,11 @@ const messages = defineMessages({
 		<Combobox
 			:model-value="ctx.maxResults.value"
 			:options="maxResultsOptions"
-			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[9rem]'"
+			:class="
+				ctx.variant === 'web'
+					? '!w-[9rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[9rem] min-w-max max-w-full'
+			"
 			:placeholder="formatMessage(commonMessages.viewLabel)"
 			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
 		>