Rewording + animation when shown the feedback panel.

services/web/app/views/project/editor/pdf.jade

@@ -148,10 +148,8 @@ div.full-size.pdf(ng-controller="PdfController")
 								ng-click="trackLogHintsNegativeFeedback(entry.ruleId); showNegFeedbackUI = true;"
 								href
 							) #{translate("answer_no")}
-						.card-hint-extra-feedback(
-							ng-show="showNegFeedbackUI && !feedbackSent"
-						)
-							p Can you help us understand why this hint wasn't helpful?
+						.card-hint-extra-feedback(ng-hide="!showNegFeedbackUI || feedbackSent")
+							p.card-hint-extra-feedback-label Can you help us understand why this hint wasn't helpful?
 							.radio: label
 								input(
 									type="radio"
@@ -165,14 +163,14 @@ div.full-size.pdf(ng-controller="PdfController")
 									ng-model="negFeedbackReason"
 									value="not_applicable"
 								)
-								| I couldn’t apply it to my document
+								| I can’t apply this solution to my document
 							.radio: label
 								input(
 									type="radio"
 									ng-model="negFeedbackReason"
 									value="incorrect"
 								)
-								| I don’t think this is correct
+								| This doesn’t fix the error
 							.radio: label
 								input(
 									type="radio"

services/web/public/stylesheets/app/editor/pdf.less

@@ -203,6 +203,17 @@
 	white-space: nowrap;
 }
 
+
+@keyframes expand-feedback-area {
+	from {
+		max-height: 0;
+	}
+
+	to {
+		max-height: 500px;
+	}
+}
+
 .card-hint:extend(.card-thin) {
 	margin-top: 10px;
 	padding-bottom: 7px;
@@ -283,9 +294,16 @@
 	&-extra-feedback {
 		color: @gray-dark;
 		font-size: 0.8rem;
-		border-top: solid 1px @gray-lighter;
 		margin-top: 10px;
-		padding: 5px;
+		padding-bottom: 5px;
+		animation: 0.5s ease-out expand-feedback-area;
+		overflow: hidden;
+
+		&-label {
+			margin: 5px 0 10px;
+			padding-top: 5px;
+			border-top: solid 1px @gray-lighter;
+		}
 
 		.radio {
 			margin: 5px;