fix(site/src/pages/TemplateBuilder): display TemplateCard/ModuleCard's official badge inline (#27036)

closes DEVEX-575

There are some screen widths / base template names where the official
badge will break lines by itself as an orphan (see Google Compute Engine
(Linux) in screenshot below). However, I personally prefer this over the
current flex layout (compare with the screenshot in original issue)

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/d5bee310-0202-4d45-aef7-767e457be051"
/>

Unfortunately `&nbsp;` only works if the entities on either side are
both text--not text on the left + image on the right, which is what we
have here.

^One alternative to prevent orphan badges is to split the base template
name by words, then wrap the last word + the official badge in a span
with `white-space: nowrap;`. But that feels a little overwrought to me;
I like the clarity of continuing to just show `{name}` in the JSX. What
do you guys think?

site/src/pages/TemplateBuilder/ModuleCard.tsx

@@ -62,13 +62,13 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			</div>
 
 			<div>
-				<h3
-					id={nameId}
-					className="flex items-center gap-1.5 text-md font-semibold text-content-primary"
-				>
+				<h3 id={nameId} className="text-md font-semibold text-content-primary">
 					{name}
 					{official && (
-						<BadgeCheckIcon className="size-4 text-highlight-sky shrink-0" />
+						<>
+							{" "}
+							<BadgeCheckIcon className="size-4 text-highlight-sky align-middle" />
+						</>
 					)}
 				</h3>
 				<p className="text-sm font-normal text-content-secondary">

site/src/pages/TemplateBuilder/TemplateCard.tsx

@@ -61,13 +61,13 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			</div>
 
 			<div>
-				<h3
-					id={nameId}
-					className="flex items-center gap-1.5 text-md font-semibold text-content-primary"
-				>
+				<h3 id={nameId} className="text-md font-semibold text-content-primary">
 					{name}
 					{official && (
-						<BadgeCheckIcon className="size-4 text-highlight-sky shrink-0" />
+						<>
+							{" "}
+							<BadgeCheckIcon className="size-4 text-highlight-sky align-middle" />
+						</>
 					)}
 				</h3>
 				<div>