From a33ea94a248bc5123448d6a432381f5232eb0f04 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 2 Sep 2025 14:13:24 -0400
Subject: [PATCH] Device User Page: Fix unreleased modal margins bug (#32506)

---
 .../BitLockerPinModal/BitLockerPinModal.tsx   | 63 +++++++++++++++++++
 .../DeviceUserPage/BitLockerPinModal/index.ts |  1 +
 .../details/DeviceUserPage/DeviceUserPage.tsx | 51 ++-------------
 .../hosts/details/DeviceUserPage/_styles.scss |  4 --
 4 files changed, 68 insertions(+), 51 deletions(-)
 create mode 100644 frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
 create mode 100644 frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/index.ts

diff --git a/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
new file mode 100644
index 0000000000..b50eae56ed
--- /dev/null
+++ b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/BitLockerPinModal.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+import Button from "components/buttons/Button";
+import Modal from "components/Modal";
+
+import ModalFooter from "components/ModalFooter";
+
+interface IBitLockerPinModalProps {
+  onCancel: () => void;
+}
+
+const baseClass = "bit-locker-pin-modal";
+
+const BitLockerPinModal = ({
+  onCancel,
+}: IBitLockerPinModalProps): JSX.Element => {
+  return (
+    <Modal
+      title="Create PIN"
+      onExit={onCancel}
+      onEnter={onCancel}
+      className={baseClass}
+      width="large"
+    >
+      <>
+        <div>
+          <p>
+            <ol>
+              <li>
+                <p>
+                  Open the <b>Start menu</b>.
+                </p>
+              </li>
+              <li>
+                <p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
+              </li>
+              <li>
+                <p>
+                  Choose <b>Enter a PIN (recommended)</b> and follow the prompts
+                  to create a PIN. If you don&apos;t see this option, wait 1
+                  minute and refresh the <b>BitLocker Drive Encryption</b>{" "}
+                  window.
+                </p>
+              </li>
+              <li>
+                <p>
+                  Close this window and select <b>Refetch</b> on your{" "}
+                  <b>My device</b> page. This informs your organization that you
+                  have set a BitLocker PIN.
+                </p>
+              </li>
+            </ol>
+          </p>
+        </div>
+        <ModalFooter
+          primaryButtons={<Button onClick={onCancel}>Done</Button>}
+        />
+      </>
+    </Modal>
+  );
+};
+
+export default BitLockerPinModal;
diff --git a/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/index.ts b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/index.ts
new file mode 100644
index 0000000000..75c0504552
--- /dev/null
+++ b/frontend/pages/hosts/details/DeviceUserPage/BitLockerPinModal/index.ts
@@ -0,0 +1 @@
+export { default } from "./BitLockerPinModal";
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index d743d2c679..764e65f121 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
@@ -60,6 +60,7 @@ import FleetIcon from "../../../../../assets/images/fleet-avatar-24x24@2x.png";
 import PolicyDetailsModal from "../cards/Policies/HostPoliciesTable/PolicyDetailsModal";
 import AutoEnrollMdmModal from "./AutoEnrollMdmModal";
 import ManualEnrollMdmModal from "./ManualEnrollMdmModal";
+import BitLockerPinModal from "./BitLockerPinModal";
 import CreateLinuxKeyModal from "./CreateLinuxKeyModal";
 import OSSettingsModal from "../OSSettingsModal";
 import BootstrapPackageModal from "../HostDetailsPage/modals/BootstrapPackageModal";
@@ -620,53 +621,9 @@ const DeviceUserPage = ({
                 />
               ))}
             {showBitLockerPINModal && (
-              <Modal
-                title="Create PIN"
-                onExit={() => setShowBitLockerPINModal(false)}
-                onEnter={() => setShowBitLockerPINModal(false)}
-                className={baseClass}
-                width="large"
-              >
-                <>
-                  <div>
-                    <p>
-                      <ol>
-                        <li>
-                          <p>
-                            Open the <b>Start menu</b>.
-                          </p>
-                        </li>
-                        <li>
-                          <p>Type &ldquo;Manage BitLocker&rdquo; and launch.</p>
-                        </li>
-                        <li>
-                          <p>
-                            Choose <b>Enter a PIN (recommended)</b> and follow
-                            the prompts to create a PIN. If you don&apos;t see
-                            this option, wait 1 minute and refresh the{" "}
-                            <b>BitLocker Drive Encryption</b> window.
-                          </p>
-                        </li>
-                        <li>
-                          <p>
-                            Close this window and select <b>Refetch</b> on your{" "}
-                            <b>My device</b> page. This informs your
-                            organization that you have set a BitLocker PIN.
-                          </p>
-                        </li>
-                      </ol>
-                    </p>
-                  </div>
-                  <div className="modal-cta-wrap">
-                    <Button
-                      type="button"
-                      onClick={() => setShowBitLockerPINModal(false)}
-                    >
-                      Done
-                    </Button>
-                  </div>
-                </>
-              </Modal>
+              <BitLockerPinModal
+                onCancel={() => setShowBitLockerPINModal(false)}
+              />
             )}
           </div>
         )}
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index 1ee1ffe696..5e97e59d62 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -70,10 +70,6 @@
   .policies-card .data-table-block .data-table__table thead .response__header {
     width: $col-md;
   }
-
-  .modal__content-wrapper {
-    margin-top: 0;
-  }
 }
 
 .dup-org-logo {