From d23b925bb9a71e0320d59c3ae70295041bd89abb Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 3 Sep 2025 03:12:07 -0700
Subject: [PATCH] Fixed a few icons in settings shrinking on mobile (#4331)

* Fix some icons shrinking Fixes #2297

* more shrinkage

* fix typo
---
 apps/frontend/src/pages/settings/billing/index.vue   |  6 +++---
 apps/frontend/src/pages/settings/index.vue           | 12 ++++++------
 .../ui/src/components/settings/ThemeSelector.vue     |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index ec48f790..30041f24 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -32,15 +32,15 @@
 					<div class="flex flex-col gap-2">
 						<span class="font-bold">Benefits</span>
 						<div class="flex items-center gap-2">
-							<CheckCircleIcon class="h-5 w-5 text-brand" />
+							<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
 							<span> Ad-free browsing on modrinth.com and Modrinth App </span>
 						</div>
 						<div class="flex items-center gap-2">
-							<CheckCircleIcon class="h-5 w-5 text-brand" />
+							<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
 							<span>Modrinth+ badge on your profile</span>
 						</div>
 						<div class="flex items-center gap-2">
-							<CheckCircleIcon class="h-5 w-5 text-brand" />
+							<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
 							<span>Support Modrinth and creators directly</span>
 						</div>
 					</div>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 6be61c5e..5038c411 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -56,9 +56,9 @@
 							<div class="label">
 								<RadioButtonCheckedIcon
 									v-if="cosmetics.searchDisplayMode[projectType.id] === 'list'"
-									class="radio"
+									class="radio shrink-0"
 								/>
-								<RadioButtonIcon v-else class="radio" />
+								<RadioButtonIcon v-else class="radio shrink-0" />
 								Rows
 							</div>
 						</button>
@@ -82,9 +82,9 @@
 							<div class="label">
 								<RadioButtonCheckedIcon
 									v-if="cosmetics.searchDisplayMode[projectType.id] === 'grid'"
-									class="radio"
+									class="radio shrink-0"
 								/>
-								<RadioButtonIcon v-else class="radio" />
+								<RadioButtonIcon v-else class="radio shrink-0" />
 								Grid
 							</div>
 						</button>
@@ -106,9 +106,9 @@
 							<div class="label">
 								<RadioButtonCheckedIcon
 									v-if="cosmetics.searchDisplayMode[projectType.id] === 'gallery'"
-									class="radio"
+									class="radio shrink-0"
 								/>
-								<RadioButtonIcon v-else class="radio" />
+								<RadioButtonIcon v-else class="radio shrink-0" />
 								Gallery
 							</div>
 						</button>
diff --git a/packages/ui/src/components/settings/ThemeSelector.vue b/packages/ui/src/components/settings/ThemeSelector.vue
index 7feb8ee6..32b496ec 100644
--- a/packages/ui/src/components/settings/ThemeSelector.vue
+++ b/packages/ui/src/components/settings/ThemeSelector.vue
@@ -72,18 +72,18 @@ function asString(theme: T): string {
 				</div>
 			</div>
 			<div class="label">
-				<RadioButtonCheckedIcon v-if="currentTheme === option" class="radio" />
-				<RadioButtonIcon v-else class="radio" />
+				<RadioButtonCheckedIcon v-if="currentTheme === option" class="radio shrink-0" />
+				<RadioButtonIcon v-else class="radio shrink-0" />
 				{{ colorTheme[asString(option)] ? formatMessage(colorTheme[asString(option)]) : option }}
 				<SunIcon
 					v-if="'light' === option"
 					v-tooltip="formatMessage(colorTheme.preferredLight)"
-					class="theme-icon"
+					class="theme-icon shrink-0"
 				/>
 				<MoonIcon
 					v-else-if="'dark' === option"
 					v-tooltip="formatMessage(colorTheme.preferredDark)"
-					class="theme-icon"
+					class="theme-icon shrink-0"
 				/>
 			</div>
 		</button>