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

@@ -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>

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>

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" />
+				<RadioButtonCheckedIcon v-if="currentTheme === option" class="radio shrink-0" />
-				<RadioButtonIcon v-else class="radio" />
+				<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>