Tag editor improvements

src/Squidex/app/framework/angular/forms/tag-editor.component.scss

@@ -15,7 +15,7 @@ $focus-color: #b3d3ff;
     &.disabled,
     &:disabled {
         background: $color-input-disabled;
-    } 
+    }
 
     &.focus {
         @include box-shadow-raw(0 0 0 .2rem rgba(51, 137, 255, .25));
@@ -23,12 +23,18 @@ $focus-color: #b3d3ff;
     }
 }
 
+div {
+    &.form-control {
+        height: auto;
+    }
+}
+
 .blank {
     & {
         padding: 0;
         border: 0;
         background: transparent;
-        min-width: 40%;
+        min-width: 50px;
         max-width: 100%;
         height: auto !important;
     }
@@ -59,6 +65,7 @@ $focus-color: #b3d3ff;
         font-size: .8rem;
         font-weight: normal;
         margin: 0 2px 2px 0;
+        white-space: nowrap;
     }
 
     &,

src/Squidex/app/framework/angular/forms/tag-editor.component.ts

@@ -204,7 +204,12 @@ export class TagEditorComponent implements ControlValueAccessor, OnDestroy, OnIn
             if (ctx) {
                 ctx.font = `${style.getPropertyValue('font-size')} ${style.getPropertyValue('font-family')}`;
 
-                this.inputElement.nativeElement.style.width = <any>((ctx.measureText(this.inputElement.nativeElement.value).width + 20) + 'px');
+                const widthText = ctx.measureText(this.inputElement.nativeElement.value).width;
+                const widthPlaceholder = ctx.measureText(this.placeholder).width;
+
+                const width = Math.max(widthText, widthPlaceholder);
+
+                this.inputElement.nativeElement.style.width = <any>((width + 20) + 'px');
             }
         }
     }