fix: properly center badge text

Author: iCrawl

packages/website/src/components/CodeListing.tsx

@@ -41,17 +41,17 @@ export function CodeListing({
 				{deprecation || readonly || optional ? (
 					<div className="flex flex-row gap-1">
 						{deprecation ? (
-							<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 								Deprecated
 							</div>
 						) : null}
 						{readonly ? (
-							<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 								Readonly
 							</div>
 						) : null}
 						{optional ? (
-							<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 								Optional
 							</div>
 						) : null}

packages/website/src/components/MethodItem.tsx

@@ -37,17 +37,17 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 					(data.kind === 'Method' && method.static) ? (
 						<div className="flex flex-row gap-1">
 							{data.deprecated ? (
-								<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 									Deprecated
 								</div>
 							) : null}
 							{data.kind === 'Method' && method.protected ? (
-								<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 									Protected
 								</div>
 							) : null}
 							{data.kind === 'Method' && method.static ? (
-								<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 									Static
 								</div>
 							) : null}

packages/website/src/components/Sections.tsx

@@ -66,12 +66,12 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
 						{data.deprecated || data.protected ? (
 							<div className="flex flex-row gap-1">
 								{data.deprecated ? (
-									<div className="h-5 place-content-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+									<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
 										Deprecated
 									</div>
 								) : null}
 								{data.protected ? (
-									<div className="bg-blurple h-5 place-content-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+									<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
 										Protected
 									</div>
 								) : null}