From fc7a7dfff7f358fe921d9c3487bd13e3e9782509 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 7 Jan 2025 09:41:26 -0300
Subject: [PATCH] fix: adjust template row alignment when missing description
 (#16056)

Fix https://github.com/coder/coder/issues/16046

**Before:**

![image](https://github.com/user-attachments/assets/90640f04-4d41-463e-b81d-92b78cba10f5)

**After:**
<img width="1336" alt="Screenshot 2025-01-07 at 09 34 28"
src="https://github.com/user-attachments/assets/33f0f9b1-0594-41c3-93c3-3225f791e2cf"
/>


**Bonus:**
Adjust the skeleton to match the new design.
---
 site/src/components/Avatar/AvatarData.tsx       | 17 ++---------------
 .../Avatar/AvatarDataSkeleton.stories.tsx       | 12 ++++++++++++
 .../components/Avatar/AvatarDataSkeleton.tsx    |  4 ++--
 3 files changed, 16 insertions(+), 17 deletions(-)
 create mode 100644 site/src/components/Avatar/AvatarDataSkeleton.stories.tsx

diff --git a/site/src/components/Avatar/AvatarData.tsx b/site/src/components/Avatar/AvatarData.tsx
index fab188a234..008aaafd27 100644
--- a/site/src/components/Avatar/AvatarData.tsx
+++ b/site/src/components/Avatar/AvatarData.tsx
@@ -37,23 +37,10 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	}
 
 	return (
-		<Stack
-			spacing={1}
-			direction="row"
-			css={{
-				minHeight: 40, // Make it predictable for the skeleton
-				width: "100%",
-				lineHeight: "150%",
-			}}
-		>
+		<Stack spacing={1} direction="row" className="w-full">
 			{avatar}
 
-			<Stack
-				spacing={0}
-				css={{
-					width: "100%",
-				}}
-			>
+			<Stack spacing={0} className="w-full">
 				<span
 					css={{
 						color: theme.palette.text.primary,
diff --git a/site/src/components/Avatar/AvatarDataSkeleton.stories.tsx b/site/src/components/Avatar/AvatarDataSkeleton.stories.tsx
new file mode 100644
index 0000000000..0df5ca083b
--- /dev/null
+++ b/site/src/components/Avatar/AvatarDataSkeleton.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AvatarDataSkeleton } from "./AvatarDataSkeleton";
+
+const meta: Meta<typeof AvatarDataSkeleton> = {
+	title: "components/AvatarDataSkeleton",
+	component: AvatarDataSkeleton,
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarDataSkeleton>;
+
+export const Default: Story = {};
diff --git a/site/src/components/Avatar/AvatarDataSkeleton.tsx b/site/src/components/Avatar/AvatarDataSkeleton.tsx
index 5bc10a01d6..b360e80611 100644
--- a/site/src/components/Avatar/AvatarDataSkeleton.tsx
+++ b/site/src/components/Avatar/AvatarDataSkeleton.tsx
@@ -4,8 +4,8 @@ import type { FC } from "react";
 
 export const AvatarDataSkeleton: FC = () => {
 	return (
-		<Stack spacing={1.5} direction="row" alignItems="center">
-			<Skeleton variant="circular" width={36} height={36} />
+		<Stack spacing={1} direction="row" className="w-full">
+			<Skeleton variant="rectangular" className="size-6 rounded-sm" />
 
 			<Stack spacing={0}>
 				<Skeleton variant="text" width={100} />