Left-align build analyzer effect toggles

app/components/elements/Switch.module.css

@@ -3,7 +3,7 @@
 	height: var(--height);
 	background: var(--color-bg);
 	border: var(--border-style);
-	border-radius: calc(var(--radius-selector) * 2);
+	border-radius: calc(var(--radius-selector) * 2 * var(--radius-scale));
 	padding: 2px;
 	display: inline-grid;
 	justify-items: center;
@@ -15,7 +15,7 @@
 		height: 100%;
 		aspect-ratio: 1 / 1;
 		background: var(--color-border);
-		border-radius: var(--radius-selector);
+		border-radius: calc(var(--radius-selector) * var(--radius-scale));
 		grid-row-start: 1;
 		grid-column-start: 2;
 	}
@@ -23,6 +23,7 @@
 
 .root {
 	--height: var(--selector-size-sm);
+	--radius-scale: 1;
 
 	cursor: pointer;
 	display: grid;
@@ -76,3 +77,10 @@
 
 	font-size: var(--font-2xs);
 }
+
+.large {
+	--height: var(--selector-size-lg);
+	--radius-scale: 1.5;
+
+	font-size: var(--font-sm);
+}

app/components/elements/Switch.tsx

@@ -8,7 +8,7 @@ interface SendouSwitchProps {
 	defaultSelected?: boolean;
 	onChange?: (isSelected: boolean) => void;
 	isDisabled?: boolean;
-	size?: "small";
+	size?: "small" | "large";
 	"aria-label"?: string;
 	"data-testid"?: string;
 	children?: React.ReactNode;
@@ -27,7 +27,10 @@ export function SendouSwitch({
 }: SendouSwitchProps) {
 	return (
 		<label
-			className={clsx(styles.root, { [styles.small]: size === "small" })}
+			className={clsx(styles.root, {
+				[styles.small]: size === "small",
+				[styles.large]: size === "large",
+			})}
 			data-testid={testId}
 		>
 			<input

app/features/build-analyzer/routes/analyzer.module.css

@@ -51,14 +51,19 @@
 
 .effectsSelector {
 	display: grid;
-	gap: var(--s-2);
-	grid-template-columns: 1fr 2.5fr;
-	place-items: center;
+	gap: var(--s-2) var(--s-4);
+	grid-template-columns: 3rem 1fr;
+	align-items: center;
+	width: 100%;
+	max-width: 17rem;
+
+	& > :nth-child(odd) {
+		justify-self: center;
+	}
 }
 
-/* Fixed width so picking a longer option doesn't resize the column */
 .ldeIntensitySelect {
-	width: 12.5rem;
+	width: 100%;
 }
 
 .apSummary {

app/features/build-analyzer/routes/analyzer.tsx

@@ -306,16 +306,21 @@ function BuildAnalyzerPage() {
 								}
 							/>
 						</div>
-						<LinkButton
-							to={weaponParamsPage(
-								weaponToSelectedWeapon(mainWeaponId, t).paramsSlug,
-							)}
-							variant="minimal"
-							size="small"
-							icon={<SlidersHorizontal />}
-						>
-							{t("analyzer:rawParameters")}
-						</LinkButton>
+						<div className="stack horizontal justify-between items-center w-full">
+							<LinkButton
+								to={weaponParamsPage(
+									weaponToSelectedWeapon(mainWeaponId, t).paramsSlug,
+								)}
+								variant="minimal"
+								size="small"
+								icon={<SlidersHorizontal />}
+							>
+								{t("analyzer:rawParameters")}
+							</LinkButton>
+							<div className={styles.patch}>
+								{t("analyzer:patch")} {CURRENT_PATCH}
+							</div>
+						</div>
 					</div>
 					<div className="stack md items-center w-full">
 						<div className="w-full">
@@ -415,9 +420,6 @@ function BuildAnalyzerPage() {
 							<AbilityChunksRequired build={build} />
 						) : null}
 					</div>
-					<div className={styles.patch}>
-						{t("analyzer:patch")} {CURRENT_PATCH}
-					</div>
 				</div>
 				<div className="stack md">
 					{mainWeaponCategoryItems.length > 0 ? (
@@ -1346,6 +1348,7 @@ function EffectsSelector({
 	handleAddEffect: (effect: SpecialEffectType) => void;
 	handleRemoveEffect: (effect: SpecialEffectType) => void;
 }) {
+	const { t } = useTranslation(["weapons", "game-misc"]);
 	const effectsToShow = SPECIAL_EFFECTS.filter(
 		(effect) =>
 			!isAbility(effect.type) ||
@@ -1353,6 +1356,13 @@ function EffectsSelector({
 			build2.flat().includes(effect.type),
 	).reverse(); // reverse to show Tacticooler first as it always shows
 
+	const effectLabel = (effect: SpecialEffectType) => {
+		if (isAbility(effect)) return t(`game-misc:ABILITY_${effect}`);
+		if (effect === "AURA") return "Aura";
+
+		return t("weapons:SPECIAL_15");
+	};
+
 	return (
 		<div className={styles.effectsSelector}>
 			{effectsToShow.map((effect) => {
@@ -1375,6 +1385,8 @@ function EffectsSelector({
 								/>
 							) : (
 								<SendouSwitch
+									size="large"
+									aria-label={effectLabel(effect.type)}
 									isSelected={effects.includes(effect.type)}
 									onChange={(isSelected) =>
 										isSelected

app/features/components-showcase/routes/components.tsx

@@ -642,6 +642,12 @@ function SwitchSection({ id }: { id: string }) {
 			<SectionTitle id={id}>Switch</SectionTitle>
 
 			<div className="stack md">
+				<ComponentRow label="Large">
+					<SendouSwitch size="large" isSelected={isOn} onChange={setIsOn}>
+						Toggle me
+					</SendouSwitch>
+				</ComponentRow>
+
 				<ComponentRow label="Medium (default)">
 					<SendouSwitch isSelected={isOn} onChange={setIsOn}>
 						Toggle me

changelog/2026-09-29-analyzer-effect-toggles.md

@@ -0,0 +1,5 @@
+---
+navItem: analyzer
+type: feature
+---
+Bigger effect toggles in the build analyzer, and the effects list no longer jumps sideways when Last-Ditch Effort is added