Fix modal.

backend/extensions/Squidex.Extensions/Actions/Prerender/PrerenderPlugin.cs

@@ -15,7 +15,7 @@ public sealed class PrerenderPlugin : IPlugin
 {
     public void ConfigureServices(IServiceCollection services, IConfiguration config)
     {
-        services.AddHttpClient("PrerenderAction", options =>
+        services.AddHttpClient("Prerender", options =>
         {
             options.BaseAddress = new Uri("https://api.prerender.io");
         });

frontend/src/app/features/content/pages/contents/contents-page.component.scss

@@ -67,7 +67,7 @@
     }
 
     &-button {
-        @include absolute(null, 1rem, -2.375rem);
+        @include absolute(null, 1.5rem, -2.375rem);
         background-color: $color-background;
         border: 0;
         border-radius: 4px;

frontend/src/app/features/rules/pages/rules/rules-page.component.html

@@ -13,7 +13,7 @@
 
     <ng-container>
         <sqx-list-view innerWidth="54rem" [isLoading]="rulesState.isLoading | async">
-            <div class="alert alert-danger d-flex justify-content-between mb-4" *ngIf="rulesState.runningRule | async; let runningRule">
+            <div class="alert alert-danger d-flex justify-content-between align-items-center p-2 ps-4 mb-4" *ngIf="rulesState.runningRule | async; let runningRule">
                 {{ 'rules.runningRule' | sqxTranslate: { name: runningRule.name || 'Unnamed Rule' } }}
 
                 <a class="btn" (click)="cancelRun()">{{ 'common.cancel' | sqxTranslate }}</a>

frontend/src/app/framework/angular/dropdown-menu.component.scss

@@ -3,4 +3,5 @@
 
 :host {
     background-color: $color-white;
+    display: block;
 }

frontend/src/app/framework/angular/modals/modal.directive.ts

@@ -7,7 +7,7 @@
 
 /* eslint-disable @angular-eslint/no-input-rename */
 
-import { booleanAttribute, ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnDestroy, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
+import { booleanAttribute, ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnDestroy, Renderer2, RendererFactory2, TemplateRef, ViewContainerRef } from '@angular/core';
 import { DialogModel, ModalModel, Subscriptions, Types } from '@app/framework/internal';
 import { RootViewComponent } from './root-view.component';
 
@@ -53,6 +53,7 @@ export class ModalDirective<T = unknown> implements OnDestroy {
     constructor(
         private readonly changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2,
+        private readonly rendererFactory: RendererFactory2,
         private readonly rootView: RootViewComponent,
         private readonly templateRef: TemplateRef<ModalContext<T>>,
         private readonly viewContainer: ViewContainerRef,
@@ -86,13 +87,16 @@ export class ModalDirective<T = unknown> implements OnDestroy {
                 this.changeDetector.detectChanges();
             }
         } else if (this.renderedView) {
-            this.renderedView.destroy();
-            this.renderedView = null;
-            this.renderRoots = null;
+            this.rendererFactory.begin?.();
+            try {
+                this.renderedView.destroy();
+                this.renderedView = null;
+                this.renderRoots = null;
+            } finally {
+                this.rendererFactory.end?.();
+            }
 
             remove(this.renderer, ModalDirective.backdrop);
-
-            this.changeDetector.detectChanges();
         }
 
         this.isOpen = isOpen;

frontend/src/app/shared/components/assets/asset-uploader.component.html

@@ -1,14 +1,14 @@
 <ng-container *ngIf="appsState.selectedApp | async; let app">
     <ng-container *ngIf="app.canUploadAssets">
         <ul class="nav navbar-nav align-items-center" *ngIf="assetUploader.uploads | async; let uploads" (sqxDropFile)="addFiles($event)">
-            <li class="nav-item nav-icon dropdown">
+            <li class="nav-item nav-icon dropdown d-flex align-items-center" #button>
                 <span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()">
                     <i class="icon-upload-3"></i>
 
                     <span>{{uploads.length}}</span>
                 </span>
 
-                <sqx-dropdown-menu *sqxModal="modalMenu;onRoot:false" (sqxDropFile)="addFiles($event)" class="container">
+                <sqx-dropdown-menu *sqxModal="modalMenu;onRoot:false" [sqxAnchoredTo]="button" scrollY="true" offset="8" (sqxDropFile)="addFiles($event)" class="container">
                     <div class="uploads">
                         <small class="uploads-empty text-muted" *ngIf="uploads.length === 0">
                             {{ 'assets.uploaderUploadHere' | sqxTranslate }}

frontend/src/app/shared/components/assets/asset-uploader.component.scss

@@ -1,6 +1,10 @@
 @import 'mixins';
 @import 'vars';
 
+.nav-item {
+    height: 3rem;
+}
+
 .icon-upload-3 {
     font-size: 1.4rem;
     font-weight: lighter;
@@ -9,17 +13,14 @@
 }
 
 .dropdown-menu {
-    @include absolute(2.6rem, 0, auto, auto);
-    display: block;
-    max-width: 60%;
-    min-height: 4rem;
-    min-width: 30rem;
+    @include force-width(30rem);
     padding: 1rem;
 }
 
 .uploads {
     background: none;
     border: 2px solid transparent;
+    border-radius: 0;
     min-height: 2rem;
 
     &-empty {

frontend/src/app/shared/components/assets/asset-uploader.component.ts

@@ -7,7 +7,7 @@
 
 import { AsyncPipe, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DropdownMenuComponent, FileDropDirective, ModalDirective, ProgressBarComponent, TranslatePipe } from '@app/framework';
+import { DropdownMenuComponent, FileDropDirective, ModalDirective, ModalPlacementDirective, ProgressBarComponent, TranslatePipe } from '@app/framework';
 import { AppsState, AssetsState, AssetUploaderState, ModalModel, Types, Upload } from '@app/shared/internal';
 
 @Component({
@@ -21,6 +21,7 @@ import { AppsState, AssetsState, AssetUploaderState, ModalModel, Types, Upload }
         DropdownMenuComponent,
         FileDropDirective,
         ModalDirective,
+        ModalPlacementDirective,
         NgFor,
         NgIf,
         NgSwitch,

frontend/src/app/shell/pages/internal/notification-dropdown.component.html

@@ -1,4 +1,4 @@
-<li class="nav-item nav-icon dropdown position-relative" #button>
+<li class="nav-item nav-icon dropdown d-flex align-items-center position-relative" #button>
     <span class="nav-link dropdown-toggle" (click)="modalMenu.show()">
         <i class="icon-comments"></i>
 
@@ -6,7 +6,7 @@
     </span>
 </li>
 
-<sqx-dropdown-menu *sqxModal="modalMenu;onRoot:false" [sqxAnchoredTo]="button" [scrollTop]="scrollMe.nativeElement.scrollHeight" offset="10" #scrollMe>
+<sqx-dropdown-menu *sqxModal="modalMenu;onRoot:false" [sqxAnchoredTo]="button" scrollY="true" offset="8" [scrollTop]="scrollMe.nativeElement.scrollHeight" #scrollMe>
     <ng-container *ngIf="commentItems | async; let items">
         <small class="text-muted" *ngIf="items.length === 0">
             {{ 'notifications.empty' | sqxTranslate}}

frontend/src/app/shell/pages/internal/notification-dropdown.component.scss

@@ -1,10 +1,13 @@
 @import 'mixins';
 @import 'vars';
 
+.nav-item {
+    height: 3rem;
+}
+
 .dropdown-menu {
-    max-height: 500px;
+    max-height: 70%;
     min-height: 4rem;
-    overflow-y: scroll;
     padding: 1.25rem;
     padding-bottom: 1rem;
     width: 300px;

frontend/src/app/shell/pages/internal/profile-menu.component.html

@@ -8,7 +8,7 @@
     </li>
 </ul>
 
-<sqx-dropdown-menu *sqxModal="modalMenu;closeAlways:true;onRoot:false" [sqxAnchoredTo]="button" offset="10">
+<sqx-dropdown-menu *sqxModal="modalMenu;closeAlways:true;onRoot:false" [sqxAnchoredTo]="button" offset="8">
     <a class="dropdown-item dropdown-info" href="{{snapshot.profileUrl}}" sqxExternalLink="noicon">
         <div>{{ 'profile.userEmail' | sqxTranslate }}</div>
 

frontend/src/app/theme/_common.scss

@@ -17,10 +17,6 @@ body {
     }
 }
 
-* {
-    @include scrollbars(8px, darken($color-border, 15%), transparent);
-}
-
 hr {
     border-color: $color-border;
 }