FIX #23981 TIME 1:40 detect the resizing of the window and check if the device...

FIX #23981 TIME 1:40 detect the resizing of the window and check if the device resolution has changed.

src/frontend/app/app.component.ts

-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, OnInit, ViewEncapsulation } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { SignaturesContentService } from './service/signatures.service';
 import { HttpClient } from '@angular/common/http';
@@ -19,11 +19,12 @@ import { Platform } from '@ionic/angular';
     styleUrls: ['app.component.scss']
 })
 
-export class AppComponent {
+export class AppComponent implements OnInit {
     isPortrait: boolean;
     debugMode: boolean;
     showLeftContent: boolean = false;
     showRightContent: boolean = false;
+
     constructor(private translate: TranslateService,
         public http: HttpClient,
         public signaturesService: SignaturesContentService,
@@ -53,8 +54,32 @@ export class AppComponent {
 
     }
 
-    test() {
-        return true;
+    // The event listens for window resize and checks if the device resolution has changed
+    @HostListener('window:resize', ['$event'])
+    onResize() {
+        if (window.matchMedia('(resolution: ' + window.devicePixelRatio + 'dppx)').matches) {
+            if (window.devicePixelRatio >= 1.25) {
+                this.signaturesService.mobileMode = true;
+                setTimeout(() => {
+                    $('.right-menu-responsive').css('--max-width', 'none');
+                }, 0);
+            } else {
+                this.signaturesService.mobileMode = false;
+            }
+        }
+    }
+
+    ngOnInit(): void {
+        if (window.matchMedia('(resolution: ' + window.devicePixelRatio + 'dppx)').matches) {
+            if (window.devicePixelRatio >= 1.25) {
+                this.signaturesService.mobileMode = true;
+                setTimeout(() => {
+                    $('.right-menu-responsive').css('--max-width', 'none');
+                }, 0);
+            } else {
+                this.signaturesService.mobileMode = false;
+            }
+        }
     }
 
     allowedRoute() {

src/frontend/app/sidebar/sidebar.component.ts

@@ -78,7 +78,8 @@ export class SidebarComponent implements OnInit, AfterViewInit {
     async openProfile() {
         const modal = await this.modalController.create({
             component: ProfileComponent,
-            cssClass: 'profileCss'
+            cssClass: 'profileCss',
+            backdropDismiss: false
         });
         await modal.present();
     }

src/frontend/core/global.scss

@@ -92,8 +92,14 @@ input:read-only {
 }
 
 .profileCss {
-    --width: 40%;
-    --height: 65%;
+    @media screen and (min-width: 768px) and (min-height: 768px) {
+        --width: 56%;
+        --height: 600px
+    }
+    @media screen and (min-width: 768px) and (min-height: 600px) {
+        --width: 56%;
+        --height: 600px
+    }
 }
 
 .aboutUsCss {