Fix Cloze child positioning and Editor selection box

projects/common/components/button/button.component.ts

@@ -67,6 +67,7 @@ import { ElementComponent } from '../../directives/element-component.directive';
                     false">
   `,
   styles: [
+    ':host {display: flex !important; width: 100%; height: 100%;}',
     '.full-size {width: 100%; height: 100%;}',
     '.image {object-fit: contain;}',
     '.mdc-button {min-width: unset;}'

projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts

@@ -37,6 +37,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
            (blur)="focusChanged.emit({ inputElement: input, focused: false })">
   `,
   styles: [
+    ':host {display:flex !important; width: 100%; height: 100%;}',
     '.cloze-child {border: 1px solid #ccc; border-radius: 4px;}',
     'input {width: 100%; height: 100%; padding: 0 2px; box-sizing: border-box}',
     'input:hover {border: 1px solid currentColor;}',

projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts

@@ -46,6 +46,7 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
     </mat-button-toggle-group>
   `,
   styles: [`
+    :host {display:flex !important; width: 100%; height: 100%;}
     .errors {
       border: 2px solid #f44336 !important;
     }

projects/editor/src/app/text-editor/angular-node-views/button-nodeview.component.ts

@@ -8,6 +8,9 @@ import { AngularNodeViewComponent } from 'ngx-tiptap';
                    [elementModel]="node.attrs.model"
                    [matTooltip]="'ID: ' + node.attrs.model.id">
     </aspect-button>
-  `
+  `,
+  styles: [
+    ':host {display: inline-block;}'
+  ]
 })
 export class ButtonNodeviewComponent extends AngularNodeViewComponent { }

projects/editor/src/app/text-editor/angular-node-views/text-field-nodeview.component.ts

@@ -8,7 +8,10 @@ import { AngularNodeViewComponent } from 'ngx-tiptap';
                               [elementModel]="node.attrs.model"
                               [matTooltip]="'ID: ' + node.attrs.model.id">
     </aspect-text-field-simple>
-  `
+  `,
+  styles: [
+    ':host {display: inline-block;}'
+  ]
 })
 export class TextFieldNodeviewComponent extends AngularNodeViewComponent {
 }

projects/editor/src/app/text-editor/angular-node-views/toggle-button-nodeview.component.ts

@@ -9,6 +9,9 @@ import { AngularNodeViewComponent } from 'ngx-tiptap';
                           [elementModel]="node.attrs.model"
                           [matTooltip]="'ID: ' + node.attrs.model.id">
     </aspect-toggle-button>
-  `
+  `,
+  styles: [
+    ':host {display: inline-block;}'
+  ]
 })
 export class ToggleButtonNodeviewComponent extends AngularNodeViewComponent { }