diff --git a/src/components/AvatarView.svelte b/src/components/AvatarView.svelte
index f5b39ea..de0a5bd 100644
--- a/src/components/AvatarView.svelte
+++ b/src/components/AvatarView.svelte
@@ -138,7 +138,11 @@
 			</Fab>
 		{/if}
 	</div>
-	<div class="description" on:click={enterEditMode}>
+	<div
+		class="description relative"
+		on:click={enterEditMode}
+		class:editmode={!!editMode}
+	>
 		<textarea
 			class="textarea"
 			bind:this={descriptionEditEl}
@@ -147,7 +151,7 @@
 			bind:value={state.description}
 		></textarea>
 		<span
-			class="avatar-plugin--md-preview with-placeholder"
+			class="avatar-plugin--md with-placeholder"
 			hidden={editMode}
 			bind:this={descriptionPreviewEl}
 			data-placeholder="Write your story..."
@@ -194,10 +198,13 @@
 	.description {
 		flex: 1 1 auto;
 		word-break: break-word;
-		padding: 6px;
 		border-radius: 6px;
 	}
 
+	.description.editmode {
+		padding: 6px;
+	}
+
 	.textarea {
 		width: 100%;
 		height: 100%;
diff --git a/styles.css b/styles.css
index 91bb0bc..4c6519b 100644
--- a/styles.css
+++ b/styles.css
@@ -2,6 +2,10 @@
 	float: right;
 }
 
-.avatar-plugin--md-preview > * {
-	margin-top: 0;
+.avatar-plugin--md > *:first-child {
+	margin-block-start: 0;
+}
+
+.avatar-plugin--md > *:last-child {
+	margin-block-end: 0;
 }