ui: Fix CSS related to icons and h2 changes done in different PRs

The way icons are positioned was changed to enable icons for policy
names, and in a separate PR h2's where altered to provide a nicer
looking settings page. Once these PR's where merged together they
slighly effected each other. This commit tweaks the CSS to refine, but
will be revisted at a later date

ui-v2/app/styles/components/anchors.scss

@@ -12,6 +12,11 @@ a[rel*='external'] {
   @extend %with-info-circle-outline-icon, %as-pseudo;
   opacity: 0.4;
 }
+%main-content h2 a[rel*='help']::after {
+  font-size: 0.65em;
+  margin-top: 0.2em;
+  margin-left: 0.2em;
+}
 
 [role='tabpanel'] > p:only-child [rel*='help']::after {
   content: none;

ui-v2/app/styles/components/app-view.scss

@@ -19,6 +19,9 @@ main {
 // TODO: This should be its own component
 %app-view h1 span[data-tooltip] {
   @extend %with-external-source-icon;
+  // TODO: Look to remove this, right now its needed but this
+  // should automaticaly vertically center
+  margin-top: 20px;
 }
 %app-view h1 span.kind-proxy {
   @extend %type-icon, %with-proxy;

ui-v2/app/styles/components/app-view/layout.scss

@@ -61,7 +61,7 @@
   margin-bottom: 0.4em;
 }
 // TODO: Think about an %app-form or similar
-%app-content fieldset {
+%app-content fieldset:not(.freetext-filter) {
   padding-bottom: 0.3em;
   margin-bottom: 2em;
 }

ui-v2/app/styles/components/phrase-editor/layout.scss

@@ -23,6 +23,10 @@
   padding: 8px 10px;
   box-sizing: border-box;
 }
+%phrase-editor button::before {
+  // TODO: Look at why this isn't automatically centering
+  vertical-align: inherit !important;
+}
 @media #{$--horizontal-selects} {
   %phrase-editor {
     margin-top: 14px;

ui-v2/app/styles/routes/dc/nodes/index.scss

@@ -4,3 +4,7 @@ html.template-node.template-show .sessions td:last-child {
 html.template-node.template-show .sessions td:first-child {
   @extend %tbody-th;
 }
+html.template-node.template-list .healthy h2,
+html.template-node.template-list .unhealthy h2 {
+  margin-bottom: 0.7em;
+}