Apr 1, 2025 · Apr 1, 2025
diff --git a/site/package.json b/site/package.json
 "@storybook/test": "8.4.6",
 "@swc/core": "1.3.38",
 "@swc/jest": "0.2.37",
 "@tailwindcss/typography": "0.5.16",
 "@testing-library/jest-dom": "6.6.3",
 "@testing-library/react": "14.3.1",
 "@testing-library/react-hooks": "8.0.1",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
 notification: {
 ...MockNotification,
 read_at: null,
 content: "Hello **world**!",
 content:
 "Template **Write Coder on Coder with AI** has failed to build 1/33 times over the last week.\n\n**Report:**\n\n**sweet_cannon7** failed 1 time:\n\n* [edward / coder-on-coder-claude / #34](https://dev.coder.com/@edward/coder-on-coder-claude/builds/34)\n\nWe recommend reviewing these issues to ensure future builds are successful.",
 actions: [
 {
 label: "View workspaces",
 url: "https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai",
 },
 ],
 },
 },
 };
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
 import type { InboxNotification } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import { Link } from "components/Link/Link";
 import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
 import Markdown from "react-markdown";
 </div>

 <div className="flex flex-col gap-3 flex-1">
 <span
 className={cn([
 "text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
 "[&_p]:m-0",
 ])}
 <Markdown
 className="text-content-secondary prose-sm font-medium [overflow-wrap:anywhere]"
 components={{
 a: ({ node, ...props }) => {
 return <Link {...props} />;
 },
 }}
 >
 <Markdown>{notification.content}</Markdown>
 </span>
 {notification.content}
 </Markdown>
 <div className="flex items-center gap-1">
 {notification.actions.map((action) => {
 return (
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
 },
 },
 },
 plugins: [require("tailwindcss-animate")],
 plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -140,6 +140,7 @@
		"@storybook/test": "8.4.6",
		"@swc/core": "1.3.38",
		"@swc/jest": "0.2.37",
		"@tailwindcss/typography": "0.5.16",
		"@testing-library/jest-dom": "6.6.3",
		"@testing-library/react": "14.3.1",
		"@testing-library/react-hooks": "8.0.1",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,7 +53,14 @@ export const Markdown: Story = {
		notification: {
		...MockNotification,
		read_at: null,
		content: "Hello world!",
		content:
		"Template Write Coder on Coder with AI has failed to build 1/33 times over the last week.\n\nReport:\n\nsweet_cannon7 failed 1 time:\n\n* [edward / coder-on-coder-claude / #34](https://dev.coder.com/@edward/coder-on-coder-claude/builds/34)\n\nWe recommend reviewing these issues to ensure future builds are successful.",
		actions: [
		{
		label: "View workspaces",
		url: "https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai",
		},
		],
		},
		},
		};
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		import type { InboxNotification } from "api/typesGenerated";
		import { Avatar } from "components/Avatar/Avatar";
		import { Button } from "components/Button/Button";
		import { Link } from "components/Link/Link";
		import { SquareCheckBig } from "lucide-react";
		import type { FC } from "react";
		import Markdown from "react-markdown";
Expand DownExpand Up		@@ -28,14 +29,16 @@ export const InboxItem: FC<InboxItemProps> = ({
		</div>

		<div className="flex flex-col gap-3 flex-1">
		<span
		className={cn([
		"text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
		"[&_p]:m-0",
		])}
		<Markdown
		className="text-content-secondary prose-sm font-medium [overflow-wrap:anywhere]"
		components={{
		a: ({ node, ...props }) => {
		return <Link {...props} />;
		},
		}}
		>
		<Markdown>{notification.content}</Markdown>
		</span>
		{notification.content}
		</Markdown>
		<div className="flex items-center gap-1">
		{notification.actions.map((action) => {
		return (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -75,5 +75,5 @@ module.exports = {
		},
		},
		},
		plugins: [require("tailwindcss-animate")],
		plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
		};