feat(site): align ModuleSelection icon with top line when text wraps (#26531)

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/3095d1a7-0f34-4a9a-9dbd-7b9cc524af84"
/>

Do you think we should also top-align the deselect button that displays
on hover?

site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 import { SelectionSummary } from "./SelectionSummary";
 
 const meta: Meta<typeof SelectionSummary> = {
@@ -97,6 +97,32 @@ export const WithModules: Story = {
 	},
 };
 
+export const WithLongNameModule: Story = {
+	args: {
+		currentStep: 2,
+		selectedTemplate: {
+			name: "Docker Containers",
+			iconUrl: "/icon/docker.svg",
+		},
+		selectedModules: [
+			{
+				id: "git-commit-signing",
+				name: "A module with a name long enough to cause the text inside the ModuleSelection component to wrap to the next line, showing that the icon on the left remains top-aligned with the first line of the module name",
+				iconUrl: "/icon/git.svg",
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const deselectModuleButton = await canvas.findByRole("button", {
+			name: "Deselect module",
+		});
+		deselectModuleButton.focus();
+		await expect(deselectModuleButton).toBeVisible();
+	},
+};
+
 export const ManyModules: Story = {
 	args: {
 		currentStep: 2,

site/src/pages/TemplateBuilder/SelectionSummary.tsx

@@ -174,24 +174,27 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
 			{modules.map((module) => (
 				<div
 					key={module.id}
-					className="group flex items-center justify-between p-1 mb-1 hover:bg-surface-secondary"
+					className="group flex items-start justify-between p-1 mb-1 hover:bg-surface-secondary"
 				>
-					<div className="flex items-center">
+					<div className="h-[1lh] content-center">
 						<img
 							src={module.iconUrl}
 							alt={`${module.name} icon`}
-							className="w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
+							className="block w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
 						/>
-						<span className="ml-2">{module.name}</span>
 					</div>
-					<Button
-						size="xs"
-						variant="subtle"
-						className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-						onClick={() => onDeselectModule(module.id)}
-					>
-						<XIcon className="w-4 h-4" />
-					</Button>
+					<span className="ml-2">{module.name}</span>
+					<div className="h-[1lh] content-center">
+						<Button
+							size="xs"
+							variant="subtle"
+							className="flex opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+							onClick={() => onDeselectModule(module.id)}
+							aria-label="Deselect module"
+						>
+							<XIcon className="w-4 h-4" />
+						</Button>
+					</div>
 				</div>
 			))}
 		</StepDivider>