fix: update base styles

Parkreiner · Parkreiner · commit c2470f97f586 · 2024-09-12T21:50:49.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -4,6 +4,9 @@ import { FeatureBadge } from "./FeatureBadge";
 const meta: Meta<typeof FeatureBadge> = {
 	title: "components/FeatureBadge",
 	component: FeatureBadge,
+	args: {
+		type: "beta",
+	},
 };
 
 export default meta;
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -17,16 +17,19 @@ const styles = {
 		// more types of HTML elements without creating invalid markdown, but we
 		// still want the default display behavior to be div-like
 		display: "block",
+
+		// Base style assumes that small badges will be the default
+		fontSize: "0.75rem",
+
 		maxWidth: "fit-content",
 		flexShrink: 0,
-		padding: "8px 4px",
+		padding: "4px 8px",
+		lineHeight: 1,
+		whiteSpace: "nowrap",
 		border: `1px solid ${theme.palette.divider}`,
 		color: theme.palette.text.secondary,
 		backgroundColor: theme.palette.background.default,
 		borderRadius: "6px",
-
-		// Base style assumes that small badges will be the default
-		fontSize: "0.75rem",
 	}),
 
 	highlighted: (theme) => ({
