diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index e62c35e251..ef4226c393 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -15,80 +15,79 @@
     limitations under the License.
 
 -->
-<section style="min-width: 600px;">
-  <section *ngIf="!versionCreateResult$">
-    <mat-toolbar>
-      <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
-      <span fxFlex></span>
-    </mat-toolbar>
-    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                      *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
-      <fieldset [disabled]="isLoading$ | async">
-        <div fxFlex fxLayout="column">
-          <tb-branch-autocomplete
-            fxFlex
-            required
-            formControlName="branch">
-          </tb-branch-autocomplete>
-          <mat-form-field class="mat-block" fxFlex>
-            <mat-label translate>version-control.version-name</mat-label>
-            <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
-                              createVersionFormGroup.get('versionName').hasError('pattern')">
-              {{ 'version-control.version-name-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" style="margin-bottom: 16px;">
-            <mat-label translate>version-control.default-sync-strategy</mat-label>
-            <mat-select required formControlName="syncStrategy">
-              <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-                {{syncStrategyTranslations.get(strategy) | translate}}
-              </mat-option>
-            </mat-select>
-            <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
-          </mat-form-field>
-          <tb-entity-types-version-create
-            formControlName="entityTypes">
-          </tb-entity-types-version-create>
-        </div>
-      </fieldset>
-    </form>
-    <div fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.cancel' | translate }}
-      </button>
-      <button mat-raised-button color="primary"
-              type="button"
-              (click)="export()"
-              [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid || !createVersionFormGroup.dirty">
-        {{ 'action.create' | translate }}
-      </button>
-    </div>
-  </section>
-  <section *ngIf="versionCreateResult$">
-    <section *ngIf="resultMessage">
-      <div class="mat-title vc-result-message" [innerHtml]="resultMessage"></div>
-    </section>
-    <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.close' | translate }}
-      </button>
-    </div>
-    <ng-template #progress>
-      <section fxLayout="column" fxLayoutAlign="center center">
-        <div class="mat-title vc-result-message progress">
-          <span translate>version-control.creating-version</span>
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
-      </section>
-    </ng-template>
-  </section>
+
+<section *ngIf="!versionCreateResult$">
+  <mat-toolbar>
+    <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
+    <span fxFlex></span>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                    *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
+    <fieldset [disabled]="isLoading$ | async">
+      <div fxFlex fxLayout="column">
+        <tb-branch-autocomplete
+          fxFlex
+          required
+          formControlName="branch">
+        </tb-branch-autocomplete>
+        <mat-form-field class="mat-block" fxFlex>
+          <mat-label translate>version-control.version-name</mat-label>
+          <input required matInput formControlName="versionName">
+          <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                            createVersionFormGroup.get('versionName').hasError('pattern')">
+            {{ 'version-control.version-name-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex class="mat-block" style="margin-bottom: 24px;">
+          <mat-label translate>version-control.default-sync-strategy</mat-label>
+          <mat-select required formControlName="syncStrategy">
+            <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
+              {{syncStrategyTranslations.get(strategy) | translate}}
+            </mat-option>
+          </mat-select>
+          <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
+        </mat-form-field>
+        <tb-entity-types-version-create
+          formControlName="entityTypes">
+        </tb-entity-types-version-create>
+      </div>
+    </fieldset>
+  </form>
+  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="export()"
+            [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid || !createVersionFormGroup.dirty">
+      {{ 'action.create' | translate }}
+    </button>
+  </div>
+</section>
+<section *ngIf="versionCreateResult$">
+  <section *ngIf="resultMessage">
+    <div class="mat-title vc-result-message" [innerHtml]="resultMessage"></div>
+  </section>
+  <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.close' | translate }}
+    </button>
+  </div>
+  <ng-template #progress>
+    <section fxLayout="column" fxLayoutAlign="center center">
+      <div class="mat-title vc-result-message progress">
+        <span translate>version-control.creating-version</span>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    </section>
+  </ng-template>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index 2df32ec5e2..4fd54b8b11 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -15,60 +15,59 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '600px'}">
-  <section *ngIf="!versionLoadResult$">
-    <mat-toolbar>
-      <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
-      <span fxFlex></span>
-    </mat-toolbar>
-    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                      *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <form [formGroup]="loadVersionFormGroup" style="padding-top: 16px;">
-      <fieldset [disabled]="isLoading$ | async">
-        <div fxFlex fxLayout="column">
-          <tb-entity-types-version-load
-            formControlName="entityTypes">
-          </tb-entity-types-version-load>
-        </div>
-      </fieldset>
-    </form>
-    <div fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.cancel' | translate }}
-      </button>
-      <button mat-raised-button color="primary"
-              type="button"
-              (click)="restore()"
-              [disabled]="(isLoading$ | async) || loadVersionFormGroup.invalid">
-        {{ 'action.restore' | translate }}
-      </button>
-    </div>
-  </section>
-  <section *ngIf="versionLoadResult$">
-    <div *ngIf="(versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage" class="mat-title vc-result-message">
-      {{ 'version-control.no-entities-restored' | translate }}
-    </div>
-    <div *ngIf="errorMessage" class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div>
-    <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-title vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
-    <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress"  fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.close' | translate }}
-      </button>
-    </div>
-    <ng-template #progress>
-      <section fxLayout="column" fxLayoutAlign="center center">
-        <div class="mat-title vc-result-message progress">
-          <span translate>version-control.restoring-entities-from-version</span>
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
-      </section>
-    </ng-template>
-  </section>
+
+<section *ngIf="!versionLoadResult$">
+  <mat-toolbar>
+    <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
+    <span fxFlex></span>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                    *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <form [formGroup]="loadVersionFormGroup" style="padding-top: 16px;">
+    <fieldset [disabled]="isLoading$ | async">
+      <div fxFlex fxLayout="column">
+        <tb-entity-types-version-load
+          formControlName="entityTypes">
+        </tb-entity-types-version-load>
+      </div>
+    </fieldset>
+  </form>
+  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="restore()"
+            [disabled]="(isLoading$ | async) || loadVersionFormGroup.invalid">
+      {{ 'action.restore' | translate }}
+    </button>
+  </div>
+</section>
+<section *ngIf="versionLoadResult$">
+  <div *ngIf="(versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage" class="mat-title vc-result-message">
+    {{ 'version-control.no-entities-restored' | translate }}
+  </div>
+  <div *ngIf="errorMessage" class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div>
+  <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-title vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
+  <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress"  fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.close' | translate }}
+    </button>
+  </div>
+  <ng-template #progress>
+    <section fxLayout="column" fxLayoutAlign="center center">
+      <div class="mat-title vc-result-message progress">
+        <span translate>version-control.restoring-entities-from-version</span>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    </section>
+  </ng-template>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index 89b2a67c4d..9c9eb43f9b 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -43,7 +43,7 @@
           <ng-template matExpansionPanelContent>
             <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
               <mat-divider></mat-divider>
-              <div fxLayout="row" fxLayoutGap="16px">
+              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
                 <tb-entity-type-select
                   showLabel
                   formControlName="entityType"
@@ -51,7 +51,7 @@
                   [filterAllowedEntityTypes]="false"
                   [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
                 </tb-entity-type-select>
-                <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
+                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
                   <mat-form-field fxFlex class="mat-block">
                     <mat-label translate>version-control.sync-strategy</mat-label>
                     <mat-select formControlName="syncStrategy">
@@ -76,8 +76,8 @@
                   </div>
                 </div>
               </div>
-              <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                   formGroupName="config" style="min-height: 76px;">
+              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
+                   formGroupName="config" ngStyle.gt-xs="min-height: 60px;">
                 <mat-slide-toggle formControlName="allEntities">
                   {{ 'version-control.all-entities' | translate }}
                 </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index a171e4443f..f50098c9dd 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -43,15 +43,16 @@
           <ng-template matExpansionPanelContent>
             <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
               <mat-divider></mat-divider>
-              <div fxLayout="row" fxLayoutGap="32px">
+              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
                 <tb-entity-type-select
+                  fxFlex
                   showLabel
                   formControlName="entityType"
                   required
                   [filterAllowedEntityTypes]="false"
                   [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
                 </tb-entity-type-select>
-                <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
+                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
                   <div fxFlex fxLayout="column" fxLayoutGap="8px">
                     <mat-checkbox #removeOtherEntitiesCheckbox
                                   formControlName="removeOtherEntities"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index aafeac2f3b..08e3c1f0f1 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -15,78 +15,77 @@
     limitations under the License.
 
 -->
-<section style="min-width: 300px;">
-  <section *ngIf="!versionCreateResult$">
-    <mat-toolbar>
-      <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
-      <span fxFlex></span>
-    </mat-toolbar>
-    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                      *ngIf="isLoading$ | async">
-    </mat-progress-bar>
-    <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
-      <fieldset [disabled]="isLoading$ | async">
-        <div fxFlex fxLayout="column">
-          <tb-branch-autocomplete
-            required
-            formControlName="branch">
-          </tb-branch-autocomplete>
-          <mat-form-field class="mat-block" fxFlex>
-            <mat-label translate>version-control.version-name</mat-label>
-            <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
-                              createVersionFormGroup.get('versionName').hasError('pattern')">
-              {{ 'version-control.version-name-required' | translate }}
-            </mat-error>
-          </mat-form-field>
-          <mat-checkbox *ngIf="entityId.entityType === entityTypes.DEVICE" formControlName="saveCredentials" style="margin-bottom: 16px;">
-            {{ 'version-control.export-credentials' | translate }}
-          </mat-checkbox>
-          <mat-checkbox formControlName="saveAttributes" style="margin-bottom: 16px;">
-            {{ 'version-control.export-attributes' | translate }}
-          </mat-checkbox>
-          <mat-checkbox formControlName="saveRelations" style="margin-bottom: 16px;">
-            {{ 'version-control.export-relations' | translate }}
-          </mat-checkbox>
-        </div>
-      </fieldset>
-    </form>
-    <div fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.cancel' | translate }}
-      </button>
-      <button mat-raised-button color="primary"
-              type="button"
-              (click)="export()"
-              [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid">
-        {{ 'action.create' | translate }}
-      </button>
-    </div>
-  </section>
-  <section *ngIf="versionCreateResult$">
-    <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
-      <section *ngIf="resultMessage">
-        <div class="mat-title vc-result-message">{{ resultMessage }}</div>
-        <div fxLayoutAlign="end center" fxLayoutGap="8px">
-          <button mat-button color="primary"
-                  type="button"
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()" cdkFocusInitial>
-            {{ 'action.close' | translate }}
-          </button>
-        </div>
-      </section>
-    </section>
-    <ng-template #progress>
-      <section fxLayout="column" fxLayoutAlign="center center">
-        <div class="mat-title vc-result-message progress">
-          <span translate>version-control.creating-version</span>
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
-      </section>
-    </ng-template>
-  </section>
+
+<section *ngIf="!versionCreateResult$">
+  <mat-toolbar>
+    <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
+    <span fxFlex></span>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                    *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
+    <fieldset [disabled]="isLoading$ | async">
+      <div fxFlex fxLayout="column">
+        <tb-branch-autocomplete
+          required
+          formControlName="branch">
+        </tb-branch-autocomplete>
+        <mat-form-field class="mat-block" fxFlex>
+          <mat-label translate>version-control.version-name</mat-label>
+          <input required matInput formControlName="versionName">
+          <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                            createVersionFormGroup.get('versionName').hasError('pattern')">
+            {{ 'version-control.version-name-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <mat-checkbox *ngIf="entityId.entityType === entityTypes.DEVICE" formControlName="saveCredentials" style="margin-bottom: 16px;">
+          {{ 'version-control.export-credentials' | translate }}
+        </mat-checkbox>
+        <mat-checkbox formControlName="saveAttributes" style="margin-bottom: 16px;">
+          {{ 'version-control.export-attributes' | translate }}
+        </mat-checkbox>
+        <mat-checkbox formControlName="saveRelations" style="margin-bottom: 16px;">
+          {{ 'version-control.export-relations' | translate }}
+        </mat-checkbox>
+      </div>
+    </fieldset>
+  </form>
+  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="export()"
+            [disabled]="(isLoading$ | async) || createVersionFormGroup.invalid">
+      {{ 'action.create' | translate }}
+    </button>
+  </div>
+</section>
+<section *ngIf="versionCreateResult$">
+  <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
+    <section *ngIf="resultMessage">
+      <div class="mat-title vc-result-message">{{ resultMessage }}</div>
+      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+        <button mat-button color="primary"
+                type="button"
+                [disabled]="(isLoading$ | async)"
+                (click)="cancel()" cdkFocusInitial>
+          {{ 'action.close' | translate }}
+        </button>
+      </div>
+    </section>
+  </section>
+  <ng-template #progress>
+    <section fxLayout="column" fxLayoutAlign="center center">
+      <div class="mat-title vc-result-message progress">
+        <span translate>version-control.creating-version</span>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    </section>
+  </ng-template>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
index 22bebd716f..aa0c9284a9 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
@@ -41,6 +41,7 @@
     <mat-divider vertical></mat-divider>
     <button mat-stroked-button color="primary"
             #restoreVersionButton
+            style="min-width: 150px"
             [disabled]="(isLoading$ | async)"
             (click)="toggleRestoreEntityVersion($event, restoreVersionButton)">
       <mat-icon>restore</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss
index e3efdc871b..d1f3a0e870 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss
@@ -46,9 +46,15 @@
       height: 40px;
       margin-right: 16px;
       margin-left: 16px;
+      @media #{$mat-xs} {
+        margin-right: 8px;
+        margin-left: 8px;
+      }
     }
     .diff-count {
       font-size: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
   .version-title {
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index cbd2c72c31..b75f34af06 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -15,67 +15,66 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="entityDataInfo ? {minWidth: '300px'} : {}">
-  <section *ngIf="!versionLoadResult$">
-    <mat-toolbar *ngIf="entityDataInfo">
-      <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
-      <span fxFlex></span>
-    </mat-toolbar>
-    <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
-                      *ngIf="entityDataInfo && (isLoading$ | async)">
-    </mat-progress-bar>
-    <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
-    <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
-      <fieldset [disabled]="isLoading$ | async">
-        <div fxFlex fxLayout="column">
-          <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
-            {{ 'version-control.load-credentials' | translate }}
-          </mat-checkbox>
-          <mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes" style="margin-bottom: 16px;">
-            {{ 'version-control.load-attributes' | translate }}
-          </mat-checkbox>
-          <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;">
-            {{ 'version-control.load-relations' | translate }}
-          </mat-checkbox>
-        </div>
-      </fieldset>
-    </form>
-    <div *ngIf="entityDataInfo"  fxLayoutAlign="end center" fxLayoutGap="8px">
-      <button mat-button color="primary"
-              type="button"
-              [disabled]="(isLoading$ | async)"
-              (click)="cancel()" cdkFocusInitial>
-        {{ 'action.cancel' | translate }}
-      </button>
-      <button mat-raised-button color="primary"
-              type="button"
-              (click)="restore()"
-              [disabled]="(isLoading$ | async) || restoreFormGroup.invalid">
-        {{ 'action.restore' | translate }}
-      </button>
-    </div>
-  </section>
-  <section *ngIf="versionLoadResult$">
-    <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
-      <section *ngIf="errorMessage">
-        <div class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div>
-        <div fxLayoutAlign="end center" fxLayoutGap="8px">
-          <button mat-button color="primary"
-                  type="button"
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()" cdkFocusInitial>
-            {{ 'action.close' | translate }}
-          </button>
-        </div>
-      </section>
-    </section>
-    <ng-template #progress>
-      <section fxLayout="column" fxLayoutAlign="center center">
-        <div class="mat-title vc-result-message progress">
-          <span translate>version-control.restoring-entity-version</span>
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
-      </section>
-    </ng-template>
-  </section>
+
+<section *ngIf="!versionLoadResult$">
+  <mat-toolbar *ngIf="entityDataInfo">
+    <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
+    <span fxFlex></span>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
+                    *ngIf="entityDataInfo && (isLoading$ | async)">
+  </mat-progress-bar>
+  <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
+  <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
+    <fieldset [disabled]="isLoading$ | async">
+      <div fxFlex fxLayout="column" fxLayoutGap="16px">
+        <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials">
+          {{ 'version-control.load-credentials' | translate }}
+        </mat-checkbox>
+        <mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes">
+          {{ 'version-control.load-attributes' | translate }}
+        </mat-checkbox>
+        <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations">
+          {{ 'version-control.load-relations' | translate }}
+        </mat-checkbox>
+      </div>
+    </fieldset>
+  </form>
+  <div *ngIf="entityDataInfo"  fxLayoutAlign="end center" fxLayoutGap="8px">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="restore()"
+            [disabled]="(isLoading$ | async) || restoreFormGroup.invalid">
+      {{ 'action.restore' | translate }}
+    </button>
+  </div>
+</section>
+<section *ngIf="versionLoadResult$">
+  <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
+    <section *ngIf="errorMessage">
+      <div class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div>
+      <div fxLayoutAlign="end center" fxLayoutGap="8px">
+        <button mat-button color="primary"
+                type="button"
+                [disabled]="(isLoading$ | async)"
+                (click)="cancel()" cdkFocusInitial>
+          {{ 'action.close' | translate }}
+        </button>
+      </div>
+    </section>
+  </section>
+  <ng-template #progress>
+    <section fxLayout="column" fxLayoutAlign="center center">
+      <div class="mat-title vc-result-message progress">
+        <span translate>version-control.restoring-entity-version</span>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    </section>
+  </ng-template>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
index 0c4a7ca477..1073c26acc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
@@ -217,7 +217,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
+        },
+        {maxHeight: '100vh', height: '100%', padding: '10px'},
+        {width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false);
       createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover;
     }
   }
@@ -244,7 +246,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
+        },
+        {maxHeight: '90vh', height: '100%', padding: '10px'},
+        {width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
       complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
     }
   }
@@ -292,7 +296,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               this.versionRestored.emit();
             }
           }
-        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
+        },
+        {maxHeight: '100vh', height: '100%', padding: '10px'},
+        {width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false);
       restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover;
     }
   }
@@ -313,7 +319,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
           onClose: (result: VersionLoadResult | null) => {
             restoreEntitiesVersionPopover.hide();
           }
-        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
+        },
+        {maxHeight: '80vh', height: '100%', padding: '10px'},
+        {width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
       restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
     }
   }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
index 4cf23ca6d5..f9f2391ed2 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 :host {
+  .mat-form-field {
+    width: 100%;
+  }
 }
 
 :host ::ng-deep {