diff --git a/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx b/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx
index 26fbc7e..659ec87 100644
--- a/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx
+++ b/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx
@@ -29,7 +29,12 @@ export const ColorChips: FC<ChipsProps> = ({
 			return []
 		}
 
-		const r = height / 2
+		// use the largest radius that will fit - either half the height or based on the
+		// max available width when constrained horizontally
+		const hr = height / 2
+		const pr = width / maxItems / 2 - 0.5
+		const r = pr < hr ? pr : hr
+
 		const x = scaleLinear()
 			.domain([0, maxItems - 1])
 			.range([r, width - r])
@@ -42,7 +47,7 @@ export const ColorChips: FC<ChipsProps> = ({
 					fill={color}
 					stroke={'none'}
 					cx={x(i)}
-					cy={r}
+					cy={hr}
 					r={r}
 					height={height}
 				/>
diff --git a/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx b/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
index caa4e47..ad04c5d 100644
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
@@ -65,7 +65,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 	)
 	const controlStyle = useMemo(
 		() => ({
-			width: size === 'medium' ? 320 : 240,
+			width: size === 'medium' ? 320 : 200,
 			padding: 8,
 			margin: 8,
 		}),