[editor] Align common visibility rule attributes vertically

- Fix typo in css classname

projects/common/assets/common-styles.css

@@ -81,13 +81,20 @@ blockquote p {
   justify-content: flex-end;
 }
 
-.fx-colum-start-stretch {
+.fx-column-start-stretch {
   display: flex;
   align-items: stretch;
   flex-direction: column;
   justify-content: flex-start;
 }
 
+.fx-column-start-start {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
 .fx-gap-10 {
   gap: 10px;
 }

projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.html

 <h1 mat-dialog-title>{{'manageStateVariables' | translate}}</h1>
-<div mat-dialog-content class="fx-colum-start-stretch fx-gap-20">
+<div mat-dialog-content class="fx-column-start-stretch fx-gap-20">
   <div class="fx-row-end-stretch">
     <button mat-icon-button
             matSuffix

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html

 <h1 mat-dialog-title>{{'section.manageVisibilityRules' | translate}}</h1>
-<div mat-dialog-content class="fx-colum-start-stretch fx-gap-20">
+<div mat-dialog-content class="fx-column-start-stretch fx-gap-20">
   <ng-container *ngIf="controlIds.length">
     <div class="fx-row-end-stretch">
       <button mat-icon-button
@@ -10,13 +10,17 @@
       </button>
     </div>
     <div *ngIf="visibilityRules.length"
-         class="fx-row-start-stretch fx-gap-10">
+         class="fx-column-start-start">
       <mat-checkbox
-        class="fixed-size-field"
         [(ngModel)]="enableReHide">
         {{'section.enableReHide' | translate}}
       </mat-checkbox>
-      <mat-form-field class="fixed-size-field">
+      <mat-checkbox
+        [disabled]="enableReHide"
+        [(ngModel)]="animatedVisibility">
+        {{'section.animatedVisibility' | translate}}
+      </mat-checkbox>
+      <mat-form-field>
         <mat-label>{{'section.visibilityDelay' | translate}}</mat-label>
         <input matInput
                type="number"
@@ -25,11 +29,6 @@
                [placeholder]="'section.visibilityDelay' | translate"
                [(ngModel)]="visibilityDelay">
       </mat-form-field>
-      <mat-checkbox
-        [disabled]="enableReHide"
-        [(ngModel)]="animatedVisibility">
-        {{'section.animatedVisibility' | translate}}
-      </mat-checkbox>
     </div>
   </ng-container>
 

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.scss

-.fixed-size-field {
-  width: 212px;
-  min-width: 212px;
-}

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts

@@ -3,8 +3,7 @@ import { VisibilityRule } from 'common/models/visibility-rule';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
-  templateUrl: './visibility-rules-dialog.component.html',
-  styleUrls: ['./visibility-rules-dialog.component.scss']
+  templateUrl: './visibility-rules-dialog.component.html'
 })
 export class VisibilityRulesDialogComponent {
   visibilityRules!: VisibilityRule[];