Move to border-box

packages/webapp/src/App/StyleContext.tsx

@@ -27,7 +27,7 @@ const GlobalStyle = () => {
 		<style>
 			{`
 			* {
-				box-sizing: content-box;
+				box-sizing: border-box;
 			}
 			html,
 			body,

packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeColors/ColorBand.tsx

@@ -21,7 +21,7 @@ export const ColorBand: FC<ColorBandProps> = ({
 	const colorBlocks = useMemo(() => {
 		// hard-coded 83 is the label width + (2 * padding) + (2 * margin) + (2 * band margin)
 		// 65 + 10 + 4 + 4
-		const slice = width ? (width - 83) / colors.length : 0
+		const slice = width ? (width - 102) / colors.length : 0
 		return colors.map((color, index) => {
 			return (
 				<div

packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeColors/ColorStrip.tsx

@@ -28,10 +28,10 @@ export const ColorStrip: FC<ColorStripProps> = ({
 						key={`Color-${index}`}
 						title={`${label} color ${color}`}
 						style={{
-							width: 50,
+							width: 58,
 							flexShrink: 0,
 							background: color,
-							height: 20,
+							height: 30,
 							lineHeight: '20px',
 							color: labelColors != null ? labelColors[index] : background,
 							textAlign: 'center',

packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeColors/index.tsx

@@ -234,7 +234,7 @@ function useScales(scaleItemCount: number) {
 			theme.scales().sequential2(bandDomain).toArray(),
 			theme.scales().diverging2(bandDomain).toArray(),
 			theme.scales().greys(bandDomain).toArray(),
-			theme.scales().rainbow(bandDomain).toArray(),
+			theme.scales().rainbow(bandDomain).toArray(100),
 		]
 	}, [theme, scaleItemCount])
 }