Small UI improvements.

frontend/app/features/rules/pages/rules/actions/generic-action.component.html

@@ -27,9 +27,9 @@
             <sqx-form-hint>
                 {{property.description}}
 
-                <ng-container *ngIf="property.isFormattable">
+                <div *ngIf="property.isFormattable">
                     You can use advanced formatting: <a href="https://docs.squidex.io/concepts/rules#3-formatting" sqxExternalLink>Documentation</a>
-                </ng-container>
+                </div>
             </sqx-form-hint>
         </div>
     </div>

frontend/app/features/rules/pages/rules/actions/generic-action.component.scss

@@ -2,6 +2,10 @@
     margin-bottom: -.25rem;
 }
 
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
 textarea {
     height: 15rem;
 }

frontend/app/framework/angular/external-link.directive.ts

@@ -25,6 +25,7 @@ export class ExternalLinkDirective implements AfterViewInit {
 
         this.renderer.setProperty(element, 'target', '_blank');
         this.renderer.setProperty(element, 'rel', 'noopener');
+        this.renderer.addClass(element, 'external');
 
         if (this.type !== 'noicon') {
             const icon = this.renderer.createElement('i');

frontend/app/theme/_common.scss

@@ -182,6 +182,11 @@ body {
     visibility: hidden;
 }
 
+//External link with icon
+.external {
+    white-space: nowrap;
+}
+
 //
 // Drop area for drag and drop features.
 //