[editor] Fix fieldset width globally

Fieldsets have a browser-style of "min-width: min-content". This 
inverses the usual sizing where children adhere to the parent size, 
which is not wanted here or anywhere else. To prevent running into this 
hard to find problem again, it changed globally.

projects/editor/src/app/components/canvas/section-menu.component.ts

@@ -23,8 +23,8 @@ import { SelectionService } from '../../services/selection.service';
             [matTooltipPosition]="'left'">
       <mat-icon>list</mat-icon>
     </button>
-    <mat-menu #elementListMenu="matMenu" class="layoutMenu" xPosition="before">
-      <mat-action-list>
+    <mat-menu #elementListMenu="matMenu" xPosition="before">
+      <mat-action-list [style.padding.px]="5">
         <ng-container *ngIf="section.elements.length === 0">
           Keine Elemente im Abschnitt
         </ng-container>
@@ -48,12 +48,13 @@ import { SelectionService } from '../../services/selection.service';
             [matTooltip]="'Sichtbarkeit'" [matTooltipPosition]="'left'">
       <mat-icon>disabled_visible</mat-icon>
     </button>
+
     <button mat-mini-fab [matMenuTriggerFor]="layoutMenu"
             [matTooltip]="'Layout'" [matTooltipPosition]="'left'">
       <mat-icon>space_dashboard</mat-icon>
     </button>
-    <mat-menu #layoutMenu="matMenu" class="layoutMenu" xPosition="before">
-      <div (click)="$event.stopPropagation()">
+    <mat-menu #layoutMenu="matMenu" xPosition="before">
+      <div (click)="$event.stopPropagation()" class="layoutMenu">
         <mat-checkbox class="menuItem" [checked]="section.dynamicPositioning"
                       (click)="$any($event).stopPropagation()"
                       (change)="updateModel('dynamicPositioning', $event.checked)">
@@ -71,7 +72,6 @@ import { SelectionService } from '../../services/selection.service';
         <div *ngIf="section.dynamicPositioning">
           <fieldset>
             <legend>{{'section-menu.columns' | translate }}</legend>
-
             <mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
                           (click)="$any($event).stopPropagation()"
                           (change)="updateModel('autoColumnSize', $event.checked)">
@@ -163,9 +163,9 @@ import { SelectionService } from '../../services/selection.service';
     </button>
   `,
   styles: [
-    '::ng-deep .layoutMenu {padding: 0 15px; width: 250px;}',
-    '::ng-deep .layoutMenu fieldset {margin: 10px 0; display: flex; flex-direction: column; align-items: flex-start;}',
-    '::ng-deep .layoutMenu .section-height-input {margin-top: 10px;}',
+    '.layoutMenu {padding: 5px; width: 250px;}',
+    'aspect-size-input-panel {max-width: 100%;}',
+    '.layoutMenu fieldset {display: flex; flex-direction: column; align-items: flex-start;}',
     '.menuItem {margin-bottom: 5px;}',
     '::ng-deep .activeAfterID-menu .mat-mdc-form-field {width:90%; margin-left: 10px;}'
   ]

projects/editor/src/app/components/util/size-input-panel.component.ts

@@ -6,29 +6,27 @@ import { Measurement } from 'common/models/elements/element';
 @Component({
   selector: 'aspect-size-input-panel',
   template: `
-    <div class="panel">
-      <mat-form-field [style.width.px]="125">
-        <mat-label>{{label}}</mat-label>
-        <input matInput type="number"
-               [(ngModel)]="value"
-               (change)="valueUpdated.emit(getCombinedString())">
-      </mat-form-field>
-      <mat-form-field [style.width.px]="160">
-        <mat-label>Einheit</mat-label>
-        <mat-select [(ngModel)]="unit"
-                    (selectionChange)="valueUpdated.emit(getCombinedString())">
-          <mat-option *ngIf="allowedUnits.includes('fr')"
-                      value="fr">{{'section-menu.fraction' | translate }}</mat-option>
-          <mat-option *ngIf="allowedUnits.includes('px')"
-                      value="px">{{'section-menu.pixel' | translate }}</mat-option>
-          <mat-option *ngIf="allowedUnits.includes('%')"
-                      value="%">{{'section-menu.percent' | translate }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+    <mat-form-field [style.width.%]="40">
+      <mat-label>{{label}}</mat-label>
+      <input matInput type="number"
+             [(ngModel)]="value"
+             (change)="valueUpdated.emit(getCombinedString())">
+    </mat-form-field>
+    <mat-form-field [style.width.%]="60">
+      <mat-label>Einheit</mat-label>
+      <mat-select [(ngModel)]="unit"
+                  (selectionChange)="valueUpdated.emit(getCombinedString())">
+        <mat-option *ngIf="allowedUnits.includes('fr')"
+                    value="fr">{{'section-menu.fraction' | translate }}</mat-option>
+        <mat-option *ngIf="allowedUnits.includes('px')"
+                    value="px">{{'section-menu.pixel' | translate }}</mat-option>
+        <mat-option *ngIf="allowedUnits.includes('%')"
+                    value="%">{{'section-menu.percent' | translate }}</mat-option>
+      </mat-select>
+    </mat-form-field>
   `,
   styles: [
-    '.panel {display: flex; flex-direction: row;}'
+    ':host {display: flex; flex-direction: row;}'
   ]
 })
 export class SizeInputPanelComponent {

projects/editor/src/styles.css

@@ -6,6 +6,10 @@ input[type=color] {
   cursor: pointer;
 }
 
+fieldset {
+  min-width: 0;
+}
+
 /*Flex Styles*/
 
 .fx-column-start-stretch {