fix: adjust template row alignment when missing description

BrunoQuaresma · BrunoQuaresma · commit b2d3190ca9ac · 2025-01-07T12:31:26.000Z
diff --git 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
@@ -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
@@ -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} />
