Fix comment preview spacing

src/components/Preview/Preview.stories.tsx

@@ -1,10 +1,30 @@
 import React from 'react';
+import { css } from '@emotion/react';
 
 import { Preview } from './Preview';
 
 export default { component: Preview, title: 'Preview' };
 
 export const PreviewStory = () => (
-	<Preview previewHtml="<p>This is some preview text</p>" />
+	<div
+		css={css`
+			padding: 20px;
+			width: 700px;
+		`}
+	>
+		<Preview previewHtml="<p>This is some preview text</p>" />
+	</div>
 );
 PreviewStory.story = { name: 'default' };
+
+export const PreviewStoryLinebreaks = () => (
+	<div
+		css={css`
+			padding: 20px;
+			width: 700px;
+		`}
+	>
+		<Preview previewHtml="<p>Hello world!<br>this is a line break </p> <p>this is two</p> <p><br>this is three</p>" />
+	</div>
+);
+PreviewStoryLinebreaks.story = { name: 'Preview comment with linebreaks' };

src/components/Preview/Preview.tsx

@@ -37,6 +37,16 @@ const previewStyle = css`
 		font-family: monospace;
 		font-size: 1em;
 	}
+
+	/*
+		todo: this spacing is currently repeated here, on regular comments, and
+		on TopPick comments; can we factor out the common styling for these
+		three components?
+	*/
+	p {
+		margin-top: 0;
+		margin-bottom: ${space[3]}px;
+	}
 `;
 
 const spout = css`
@@ -53,7 +63,7 @@ const spout = css`
 export const Preview = ({ previewHtml }: Props) => (
 	<>
 		<div css={spout} />
-		<p
+		<div
 			css={previewStyle}
 			dangerouslySetInnerHTML={{ __html: previewHtml || '' }}
 		/>