Small styling changes to comment editor contribution

extensions/git-extended/src/review/reviewMode.ts

@@ -169,7 +169,7 @@ export class ReviewMode implements vscode.DecorationProvider {
 
 		this._reply = {
 			command: this._prNumber + '-post',
-			title: 'Add single comment'
+			title: 'Add comment'
 		};
 
 		this._onDidChangeDecorations.fire();

src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts

@@ -88,12 +88,12 @@ export class CommentNode {
 	}
 	constructor(public comment: modes.Comment, ) {
 		this._domNode = $('div.review-comment').getHTMLElement();
-		let avatar = $('span.float-left').appendTo(this._domNode).getHTMLElement();
+		let avatar = $('div.avatar-container').appendTo(this._domNode).getHTMLElement();
 		let img = <HTMLImageElement>$('img.avatar').appendTo(avatar).getHTMLElement();
 		img.src = comment.gravatar;
 		let commentDetailsContainer = $('.review-comment-contents').appendTo(this._domNode).getHTMLElement();
 
-		let header = $('h4').appendTo(commentDetailsContainer).getHTMLElement();
+		let header = $('div').appendTo(commentDetailsContainer).getHTMLElement();
 		let author = $('strong.author').appendTo(header).getHTMLElement();
 		author.innerText = comment.userName;
 		this._body = $('comment-body').appendTo(commentDetailsContainer).getHTMLElement();

src/vs/workbench/parts/comments/electron-browser/media/review.css

@@ -26,14 +26,14 @@
 .monaco-editor .review-widget .body .review-comment {
 	margin-left: 20px;
 	padding: 8px 16px 8px 0px;
+	display: flex;
 }
 
-.monaco-editor .review-widget .body .review-comment .float-left {
-	float: left;
+.monaco-editor .review-widget .body .review-comment .avatar-container {
 	margin-top: 4px !important;
 }
 
-.monaco-editor .review-widget .body .review-comment .float-left img.avatar {
+.monaco-editor .review-widget .body .review-comment .avatar-container img.avatar {
 	height: 28px;
 	width: 28px;
 	display: inline-block;
@@ -45,7 +45,7 @@
 }
 
 .monaco-editor .review-widget .body .review-comment .review-comment-contents {
-	margin-left: 44px;
+	margin-left: 20px;
 }
 
 .monaco-editor .review-widget .body pre {
@@ -104,8 +104,8 @@
 }
 
 .monaco-editor .review-widget .body .comment-form {
-	margin-left: 20px;
-	padding: 8px 16px 8px 0px;
+	margin: 0 20px;
+	padding: 8px 0;
 }
 
 .monaco-editor .review-widget .body .comment-form.expand .review-thread-reply-button {
@@ -115,6 +115,7 @@
 .monaco-editor .review-widget .body .comment-form.expand textarea,
 .monaco-editor .review-widget .body .comment-form.expand .form-actions {
 	display: block;
+	box-sizing: border-box;
 }
 
 .monaco-editor .review-widget .body .comment-form .review-thread-reply-button {