fix(WL-513): adjust responsiveness layout on physical devices

apps/nextapp/next.config.ts

@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */

apps/nextapp/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@next/env": "^16.1.7",
     "@tanstack/react-query": "^5.91.0",
+    "@azify/aziface-web": "1.3.0",
     "axios": "1.13.6",
     "next": "16.1.7",
     "react": "19.2.3",

apps/viteapp/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@azify/aziface-web": "1.1.0",
+    "@azify/aziface-web": "1.3.0",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "5.91.0",
     "axios": "1.13.6",

packages/aziface/src/module/aziface.ts

@@ -7,10 +7,7 @@ import { FaceTecSDK as FaceTecSDKType } from '../types/FaceTecSDK';
 import { SessionError } from '../errors/errors';
 import { SessionRequestProcessor } from '../services/request-processor';
 import { applyTheme, getBackgroundColor } from '../styles/theme';
-import {
-  getInitializationErrorCauseByCode,
-  applyResponsiveStyles,
-} from '../utils';
+import { getInitializationErrorCauseByCode } from '../utils';
 import {
   Controller,
   DisposeCallback,
@@ -43,7 +40,6 @@ export class AzifaceController implements Controller {
   public static baseUrl: string = '';
   public static headers: InitializeHeaders = {} as InitializeHeaders;
   private faceTecSDKInstance: FaceTecSDKInstance | null = null;
-  private internalID: number | undefined = undefined;
 
   public static subscribe(listener: VoidFunction): VoidFunction {
     AzifaceController.listeners.add(listener);
@@ -237,15 +233,22 @@ export class AzifaceController implements Controller {
       error: undefined,
     };
 
-    window.removeEventListener('click', applyResponsiveStyles);
-    window.clearInterval(this.internalID);
-
     this.withTheme();
     this.onStateChange();
   };
 
-  private generateExternalDatabaseRefID = (): string =>
-    `aziface_web_${crypto.randomUUID()}`;
+  private generateExternalDatabaseRefID = (): string => {
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+      /[xy]/g,
+      char => {
+        const random = (Math.random() * 16) | 0;
+        const value = char === 'x' ? random : (random & 0x3) | 0x8;
+        return value.toString(16);
+      },
+    );
+
+    return `aziface_web_${uuid}`;
+  };
 
   private onInitializationSuccess = (
     newFaceTecSdkInstance: FaceTecSDKInstance,
@@ -257,9 +260,6 @@ export class AzifaceController implements Controller {
   private onInitializationError = (): void => this.cleanup();
 
   private onComplete = (faceTecSessionStatus: FaceTecSessionStatus): void => {
-    window.removeEventListener('click', applyResponsiveStyles);
-    window.clearInterval(this.internalID);
-
     const isError =
       faceTecSessionStatus !== FaceTecSDK.FaceTecSessionStatus.SessionCompleted;
 
@@ -298,18 +298,6 @@ export class AzifaceController implements Controller {
     } else {
       throw new SessionError(MethodError.NotInitialized);
     }
-
-    window.addEventListener('click', applyResponsiveStyles);
-
-    const windowClickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window,
-    });
-
-    this.internalID = window.setInterval(() => {
-      window.dispatchEvent(windowClickEvent);
-    }, 250);
   };
 }
 

packages/aziface/src/styles/aziface.css

@@ -8,24 +8,6 @@
 
 #DOM_FT_mainInterfaceNonOverlayContainer {
   @media (max-width: 768px) {
-    border: none !important;
-  }
-}
-
-#DOM_FT_readyScreenHeaderElement {
-  @media (max-width: 768px) {
-    font-size: 1rem !important;
-  }
-}
-
-#DOM_FT_readyScreenSubtextElement {
-  @media (max-width: 768px) {
-    font-size: 0.75rem !important;
-  }
-}
-
-#DOM_FT_yourAppLogoContainer {
-  @media (max-width: 768px) {
-    height: calc(100% - 360px) !important;
+    border: 2px solid white !important;
   }
 }