From 36945d8d76ed06cb35e5147d113cc4a15780a91a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Sat, 11 Oct 2025 15:01:21 +0200
Subject: [PATCH 1/2] apple hardware help modal tweaks

---
 web/messages/en.json                          |  2 +-
 .../ClientDownload/ClientDownloadPage.tsx     | 22 ++++++++++++-------
 .../ConfigureClient/ConfigureClientPage.tsx   | 22 ++++++++++++-------
 .../AppleHelpModal/AppleHelpModal.tsx         | 15 +++++--------
 .../components/AppleHelpModal/style.scss      | 12 ++++++++++
 5 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 web/src/shared/components/AppleHelpModal/style.scss

diff --git a/web/messages/en.json b/web/messages/en.json
index e3aa70ff..7fc0623a 100644
--- a/web/messages/en.json
+++ b/web/messages/en.json
@@ -21,7 +21,7 @@
   "cmp_enrol_final": "Final step",
   "cmp_openid_button": "Sign in with {provider}",
   "cmp_copy_field_tooltip": "Copied",
-  "footer_contact": "If you need assistance, please contact your defguard administrator at.",
+  "footer_contact": "If you need assistance, please contact your defguard administrator at",
   "session_end_title": "Session expired.",
   "session_end_subtitle": "Please start the process again.",
   "session_end_link": "Back to main page",
diff --git a/web/src/pages/ClientDownload/ClientDownloadPage.tsx b/web/src/pages/ClientDownload/ClientDownloadPage.tsx
index dea1deff..7a246542 100644
--- a/web/src/pages/ClientDownload/ClientDownloadPage.tsx
+++ b/web/src/pages/ClientDownload/ClientDownloadPage.tsx
@@ -6,9 +6,8 @@ import {
   useNavigate,
   useRouterState,
 } from '@tanstack/react-router';
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import { m } from '../../paraglide/messages';
-import { AppleHelpModal } from '../../shared/components/AppleHelpModal/AppleHelpModal';
 import { Page } from '../../shared/components/Page/Page';
 import { PageNavigation } from '../../shared/components/PageNavigation/PageNavigation';
 import { EnrollmentStep } from '../../shared/components/Step/Step';
@@ -32,6 +31,11 @@ import laptopIcon from './assets/laptop.png';
 import linuxIcon from './assets/linux.png';
 import desktopIcon from './assets/pc-tower.png';
 
+const AppleHelpModal = lazy(async () => ({
+  default: (await import('../../shared/components/AppleHelpModal/AppleHelpModal'))
+    .AppleHelpModal,
+}));
+
 export const ClientDownloadPage = () => {
   const { data: pageData } = useQuery(getClientArtifactsQueryOptions);
   const { enrollmentState } = useLoaderData({
@@ -207,12 +211,14 @@ export const ClientDownloadPage = () => {
           text={m.client_download_mobile_warning()}
         />
       )}
-      <AppleHelpModal
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      />
+      <Suspense fallback={null}>
+        <AppleHelpModal
+          isOpen={appleHelpModalOpen}
+          onClose={() => {
+            setAppleHelpModalOpen(false);
+          }}
+        />
+      </Suspense>
       <Modal
         title={m.client_download_modal_title()}
         size="small"
diff --git a/web/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx b/web/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx
index c5ca757c..cad788fd 100644
--- a/web/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx
+++ b/web/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx
@@ -4,9 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useLoaderData } from '@tanstack/react-router';
 import { capitalCase } from 'change-case';
 import { QRCodeCanvas } from 'qrcode.react';
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
-import { AppleHelpModal } from '../../../shared/components/AppleHelpModal/AppleHelpModal';
 import { ContactFooter } from '../../../shared/components/ContactFooter/ContactFooter';
 import { ContainerWithIcon } from '../../../shared/components/ContainerWithIcon/ContainerWithIcon';
 import { Page } from '../../../shared/components/Page/Page';
@@ -25,6 +24,11 @@ import { ThemeSpacing } from '../../../shared/defguard-ui/types';
 import { getClientArtifactsQueryOptions } from '../../../shared/query/queryOptions';
 import { openClientLink } from '../../../shared/utils/openVirtualLink';
 
+const AppleHelpModal = lazy(async () => ({
+  default: (await import('../../../shared/components/AppleHelpModal/AppleHelpModal'))
+    .AppleHelpModal,
+}));
+
 export const ConfigureClientPage = () => {
   const pageData = useLoaderData({
     from: '/client-setup',
@@ -250,12 +254,14 @@ export const ConfigureClientPage = () => {
         <p className="finish">{m.client_setup_footer_extra()}</p>
         <ContactFooter email={pageData.enrollmentData.admin.email} />
       </footer>
-      <AppleHelpModal
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      />
+      <Suspense fallback={null}>
+        <AppleHelpModal
+          isOpen={appleHelpModalOpen}
+          onClose={() => {
+            setAppleHelpModalOpen(false);
+          }}
+        />
+      </Suspense>
     </Page>
   );
 };
diff --git a/web/src/shared/components/AppleHelpModal/AppleHelpModal.tsx b/web/src/shared/components/AppleHelpModal/AppleHelpModal.tsx
index 9e285e01..11fb6710 100644
--- a/web/src/shared/components/AppleHelpModal/AppleHelpModal.tsx
+++ b/web/src/shared/components/AppleHelpModal/AppleHelpModal.tsx
@@ -1,3 +1,4 @@
+import './style.scss';
 import { m } from '../../../paraglide/messages';
 import { Modal } from '../../defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../defguard-ui/components/ModalControls/ModalControls';
@@ -17,19 +18,13 @@ export const AppleHelpModal = ({ isOpen, onClose }: Props) => {
       size="small"
       isOpen={isOpen}
       onClose={onClose}
+      id="apple-hardware-help"
     >
       <p>{m.client_download_apple_help_content_1()}</p>
       <SizedBox height={ThemeSpacing.Xl} />
-      <video
-        controls
-        playsInline
-        preload="metadata"
-        src={apple_video_src}
-        style={{
-          width: '100%',
-          height: 'auto',
-        }}
-      />
+      <video autoPlay loop playsInline preload="auto">
+        <source src={`${apple_video_src}#t=0.1`} type="video/mp4" />
+      </video>
       <SizedBox height={ThemeSpacing.Xl} />
       <p>{m.client_download_apple_help_content_2()}</p>
       <ModalControls
diff --git a/web/src/shared/components/AppleHelpModal/style.scss b/web/src/shared/components/AppleHelpModal/style.scss
new file mode 100644
index 00000000..d9c62c41
--- /dev/null
+++ b/web/src/shared/components/AppleHelpModal/style.scss
@@ -0,0 +1,12 @@
+#apple-hardware-help .modal-content {
+  video {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto;
+  }
+
+  p {
+    font: var(--t-body-sm-400);
+    color: var(--fg-default);
+  }
+}

From 445da07859b62a65111e0e48e145ef569929c1c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Mon, 13 Oct 2025 08:28:40 +0200
Subject: [PATCH 2/2] fit video

---
 web/src/shared/components/AppleHelpModal/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/shared/components/AppleHelpModal/style.scss b/web/src/shared/components/AppleHelpModal/style.scss
index d9c62c41..ec4713a5 100644
--- a/web/src/shared/components/AppleHelpModal/style.scss
+++ b/web/src/shared/components/AppleHelpModal/style.scss
@@ -3,6 +3,7 @@
     aspect-ratio: 16 / 9;
     width: 100%;
     height: auto;
+    object-fit: cover;
   }
 
   p {