Comments: When editing, resize the textarea

Minor tweaks:
* Remove the 'editing' class after cancel/save
* Style <code>, <pre>, etc tags

src/scripts/tutti/2_comments.js

@@ -235,7 +235,10 @@ function commentEditCancel(clicked_item, reload_comment) {
 	return loadComment(comment_id, {'properties.content': 1})
 	.done(function(data) {
 		var comment_html = data['properties']['content_html'];
-		comment_container.find('.comment-body span').html(comment_html);
+		comment_container
+			.find('.comment-body span')
+			.removeClass('editing')
+			.html(comment_html);
 	})
 	.fail(function(xhr) {
 		if (console) console.log('Error fetching comment: ', xhr);

src/styles/_comments.sass

@@ -99,13 +99,13 @@ $comments-width-max: 710px
 				+media-lg
 					max-width: $comments-width-max
 
+				border: thin solid transparent
 				color: darken($color-text, 10%)
 				font:
 					size: 1em
 					weight: normal
-				transition: background-color 200ms ease-in-out, margin 200ms ease-in-out
 				margin: 0
-				border: thin solid transparent
+				transition: background-color 200ms ease-in-out, margin 200ms ease-in-out
 
 				+media-xs
 					padding-left: 0
@@ -126,24 +126,28 @@ $comments-width-max: 710px
 					&.comment-author
 						margin-bottom: 0
 
-				strong, b
-					font-weight: bold
-					color: $color-text
-
 				img.emoji
+					display: inline-block
 					padding-top: inherit
 					padding-bottom: inherit
 
 				.editing
 					background-color: $color-background-light
-					margin-bottom: 10px
+					display: flex
-					border-color: $color-background-dark
+					margin: 30px 0 10px
-					border-radius: 3px
 
 					textarea
-						box-shadow: none
+						background-color: $color-background
+						border-radius: 3px
+						border: none
+						box-shadow: inset 0 0 2px 0 rgba(darken($color-background-dark, 30%), .5)
+						display: block
+						padding: 10px
 						width: 100%
 
+						&:focus
+							box-shadow: inset 0 0 2px 0 darken($color-background-dark, 30%)
+
 			.comment-content
 				display: flex
 				flex-direction: column

src/styles/_utils.sass

@@ -351,6 +351,7 @@
 
 
 =node-details-description
+	+clearfix
 	color: darken($color-text-dark, 5%)
 	font:
 		family: $font-body
@@ -358,15 +359,10 @@
 		size: 1.2em
 
 	word-break: break-word
-	clear: both
-	+clearfix
 
 	+media-xs
 		font-size: 1.1em
 
-	strong, b
-		font-weight: 400
-
 	a:not([class])
 		color: $color-text-dark-primary
 		text-decoration: underline
@@ -453,31 +449,9 @@
 				padding-left: 20px
 
 	code, kbd, pre, samp
-		font-size: 1.3rem
+		background-color: rgba($color-primary, .05)
-
+		color: darken($color-primary, 10%)
-	pre
+		font-size: inherit
-		background-color: lighten($color-background, 5%)
-		border-color: $color-background
-		border-radius: 3px
-		color: $color-text
-
-		/* when <pre> is outside <p> */
-		margin:
-			left: 20px
-			right: 20px
-	pre+p
-		margin-top: 30px
-
-	p+pre
-		/* a <pre> right after a <p> usually are related, remove some spacing */
-		margin-top: -10px
-
-	p
-		pre
-			/* We already have spacing on the sides inside <p> */
-			margin:
-				left: 0
-				right: 0
 
 
 =markdown-preview-container

src/templates/nodes/custom/comment/list_embed.pug

@@ -165,7 +165,7 @@ script.
 			comment_content
 				.addClass('editing')
 				.find('textarea')
-				.height(Math.max(150, height + 30))
+				.autoResize()
 				.focus()
 				.trigger('keyup');
 		})
@@ -209,6 +209,7 @@ script.
 
 			$container.find('.comment-body span')
 				.html(comment_html)
+				.removeClass('editing')
 				.flashOnce();
 
 			$button