From b2d3190ca9ac04ebe54a2fa42d43f420a3108923 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 7 Jan 2025 12:31:26 +0000
Subject: [PATCH] fix: adjust template row alignment when missing description

---
 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 fab188a234853..008aaafd27184 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 0000000000000..0df5ca083b98b
--- /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 5bc10a01d6777..b360e80611864 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} />