From d110c59c50efc6f27766b66740f5fb97b0da83fc Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 3 Feb 2026 11:39:37 -0600
Subject: [PATCH] Website: Update /better page for mobile devices (#39206)

Closes: https://github.com/fleetdm/fleet/issues/35101

Changes:
- Updated the /better page to show a different list in the "What
personal information can Fleet see?" section when users visit the page
on a mobile device
---
 website/assets/js/pages/transparency.page.js  | 13 +++-
 website/assets/styles/pages/transparency.less | 24 ++++---
 website/views/pages/transparency.ejs          | 66 ++++++++++++++++++-
 3 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/website/assets/js/pages/transparency.page.js b/website/assets/js/pages/transparency.page.js
index fd1a16a5f4..3657f86645 100644
--- a/website/assets/js/pages/transparency.page.js
+++ b/website/assets/js/pages/transparency.page.js
@@ -6,6 +6,8 @@ parasails.registerPage('transparency', {
     //…
     showSecureframeBanner: false,
     modal: undefined,
+    isDesktopUser: true,
+    guessedPlatformName: 'computer',// Default to computer.
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -15,7 +17,16 @@ parasails.registerPage('transparency', {
     //…
   },
   mounted: async function() {
-    //…
+    if(bowser.ios && !bowser.ipad) {
+      this.isDesktopUser = false;
+      this.guessedPlatformName = 'iPhone';
+    } else if(bowser.ipad || (navigator.maxTouchPoints > 1 && bowser.mac)) {
+      this.isDesktopUser = false;
+      this.guessedPlatformName = 'iPad';
+    } else if(bowser.android) {
+      this.isDesktopUser = false;
+      this.guessedPlatformName = 'Android device';
+    }
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
diff --git a/website/assets/styles/pages/transparency.less b/website/assets/styles/pages/transparency.less
index 10848dcde4..d8cd30220c 100644
--- a/website/assets/styles/pages/transparency.less
+++ b/website/assets/styles/pages/transparency.less
@@ -429,6 +429,17 @@
   }
 
   @media (max-width: 575px) {
+    [purpose='hero-text'] {
+
+      h1 {
+        font-size: 32px;
+      }
+    }
+    [purpose='feature-text'] {
+      h2 {
+        font-size: 24px;
+      }
+    }
     [purpose='page-container'] {
       padding-top: 32px;
       padding-left: 24px;
@@ -486,18 +497,5 @@
     }
   }
 
-  @media (max-width: 375px) {
-    [purpose='hero-text'] {
-
-      h1 {
-        font-size: 32px;
-      }
-    }
-    [purpose='feature-text'] {
-      h2 {
-        font-size: 24px;
-      }
-    }
-  }
 
 }
diff --git a/website/views/pages/transparency.ejs b/website/views/pages/transparency.ejs
index 027891188f..3b188448fa 100644
--- a/website/views/pages/transparency.ejs
+++ b/website/views/pages/transparency.ejs
@@ -126,7 +126,7 @@
       </div>
 
     </div>
-    <div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else>
+    <div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else-if="isDesktopUser">
       <h2 class="text-center">What personal information can Fleet see?</h2>
       <p class="mb-0">Here’s what Fleet can manage on your computer:</p>
       <div purpose="accordion-body" class="mx-auto">
@@ -262,6 +262,70 @@
       </div>
       <p purpose="agents-note">Fleet can't guarantee that other personal data isn't being captured by user activity monitoring or cybersecurity tools like Veriato, CrowdStrike, etc.</p>
     </div>
+
+    <div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0" v-else>
+      <h2 class="text-center">What can Fleet see?</h2>
+      <p class="mb-0">Here’s what Fleet can manage on your {{guessedPlatformName}}:</p>
+      <div purpose="accordion-body" class="mx-auto">
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header1" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body1" aria-controls="mobile__accordion__body1">
+            On/off status
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body1" class="collapse" aria-labelledby="mobile__accordion__header1">
+            Fleet knows when your device is on or off. This is useful for understanding the state of your device and for troubleshooting should a problem ever arise.
+          </p>
+        </div>
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header2" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body2" aria-controls="mobile__accordion__body2">
+            System settings
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body2" class="collapse" aria-labelledby="mobile__accordion__header2">
+            Fleet can enforce settings like password length on your device. This is useful for IT teams to keep your device up to date so you don’t have to.
+          </p>
+        </div>
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header3" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body3" aria-controls="mobile__accordion__body3">
+            Wi-Fi settings
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body3" class="collapse" aria-labelledby="mobile__accordion__header3">
+            To help connect you to your corporate Wi-Fi or VPN, Fleet can configure Wi-Fi settings and install certificates on your device.
+          </p>
+        </div>
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header4" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body4" aria-controls="mobile__accordion__body4">
+            Remote actions
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body4" class="collapse" aria-labelledby="mobile__accordion__header4">
+            Device actions are helpful for IT teams to troubleshoot your device remotely if you run into any issues. Your device can be restarted, locked or even wiped remotely by your administrator.
+          </p>
+        </div>
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header5" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body5" aria-controls="mobile__accordion__body5">
+            Device health & performance
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body5" class="collapse" aria-labelledby="mobile__accordion__header5">
+            Fleet can see details about your device’s hardware. E.g., what processor is used, how much memory is installed, storage capacity, battery health, etc. This allows IT teams to preemptively address device health problems, which can mitigate data loss and reduce disruption to your workflow caused by IT related issues.
+          </p>
+        </div>
+        <div purpose="accordion-item">
+          <p purpose="accordion-header" id="mobile__accordion__header6" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#mobile__accordion__body6" aria-controls="mobile__accordion__body6">
+            Software
+            <span class="fa fa-angle-down"></span>
+          </p>
+          <p id="mobile__accordion__body6" class="collapse" aria-labelledby="mobile__accordion__header6">
+            Fleet can add apps and update software. This enables IT teams to better manage software update schedules, and reduce disruption to your workflow.
+          </p>
+        </div>
+      </div>
+    </div>
+
+
+
     </div>
   </div>
   <div purpose="bottom-gradient">