UI: Add linux setup software end-user demo video, fix positioning (#32880)

- Add video asset
- Update component rendering it to have unique copy and video for each
platform
- Fix a [padding
issue](https://fleetdm.slack.com/archives/C084F4MKYSJ/p1757600659471109)
- Adjust vertical position of tab nav to compensate for library-specific
positioning

<img width="1505" height="1153" alt="Screenshot 2025-09-11 at 12 01
20 PM"
src="https://github.com/user-attachments/assets/c26e8ff5-97fd-4430-ba59-1a86a9756a1c"
/>

<img width="1505" height="1153" alt="Screenshot 2025-09-11 at 12 01
26 PM"
src="https://github.com/user-attachments/assets/cbfb72ae-6b00-4f5d-bda2-5ef6b737a0b0"
/>

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/InstallSoftware.tsx

@@ -154,7 +154,7 @@ const InstallSoftware = ({
             onAddSoftware={() => setShowSelectSoftwareModal(true)}
             platform={platform}
           />
-          <InstallSoftwarePreview />
+          <InstallSoftwarePreview platform={platform} />
         </SetupExperienceContentContainer>
       );
     }

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/_styles.scss

@@ -1,10 +1,13 @@
 .install-software {
-  .react-tabs__tab-list {
-    margin-bottom: $pad-small;
-  }
   &__windows {
     @include tab-empty-state;
     max-width: none;
     padding: 64px 170px;
   }
+  .tab-nav {
+    margin-top: -20px;
+  }
+  .react-tabs__tab-list {
+    margin-bottom: $pad-xxlarge;
+  }
 }

frontend/pages/ManageControlsPage/SetupExperience/cards/InstallSoftware/components/InstallSoftwarePreview/InstallSoftwarePreview.tsx

@@ -2,24 +2,52 @@ import React from "react";
 
 import Card from "components/Card";
 
-// TODO - update this video once full UI/Server/Agent/End user flow is integrated
-import InstallSoftwareEndUserPreview from "../../../../../../../../assets/videos/install-software-preview.mp4";
+import { SetupExperiencePlatform } from "interfaces/platform";
+
+import LinuxAndWindowsInstallSoftwareEndUserPreview from "../../../../../../../../assets/videos/linux-windows-install-software-preview.mp4";
+import MacInstallSoftwareEndUserPreview from "../../../../../../../../assets/videos/mac-install-software-preview.mp4";
 
 const baseClass = "install-software-preview";
 
-const InstallSoftwarePreview = () => {
+interface InstallSoftwarePreviewProps {
+  platform: SetupExperiencePlatform;
+}
+const InstallSoftwarePreview = ({ platform }: InstallSoftwarePreviewProps) => {
+  const [copy, videoSrc] =
+    platform === "macos"
+      ? [
+          <>
+            <p>
+              During the <b>Remote Management</b> screen, the end user will see
+              selected software being installed. They won&apos;t be able to
+              continue until software is installed.
+            </p>
+            <p>
+              If there are any errors, they will be able to continue and will be
+              instructed to contact their IT admin.
+            </p>
+          </>,
+          MacInstallSoftwareEndUserPreview,
+        ]
+      : [
+          <>
+            <p>
+              When Fleet&apos;s agent (fleetd) is installed, fleetd will open
+              the <b>Fleet Desktop &gt; My device</b> page in the default
+              browser.
+            </p>
+            <p>The end user will see selected software being installed.</p>
+          </>,
+          LinuxAndWindowsInstallSoftwareEndUserPreview,
+        ];
   return (
     <Card color="grey" paddingSize="xxlarge" className={baseClass}>
       <h3>End user experience</h3>
-      <p>
-        When Fleet&apos;s agent (fleetd) is installed, fleetd will open the{" "}
-        <b>Fleet Desktop &gt; My device</b> page in the default browser.
-      </p>
-      <p>The end user will see selected software being installed.</p>
+      {copy}
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video
         className={`${baseClass}__preview-video`}
-        src={InstallSoftwareEndUserPreview}
+        src={videoSrc}
         controls
         autoPlay
         loop

frontend/pages/ManageControlsPage/SetupExperience/components/SetupExperienceContentContainer/_styles.scss

@@ -1,5 +1,4 @@
 .setup-experience-content-container {
-  padding-top: $pad-xlarge;
   max-width: $break-xxl;
   display: grid;
   grid-template-columns: minmax(150px, 450px) minmax(50%, 1fr);