fix: adjust template row alignment when missing description (coder#16056)

BrunoQuaresma · web-flow · commit fc7a7dfff7f3 · 2025-01-07T09:41:26.000-03:00
Fix coder#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.
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} />
