From a9daca1b4d4ff95265350c151f3d5c5578099a54 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 13 Feb 2024 15:59:32 +0000
Subject: [PATCH] fix to disk encryption modal input icons (#16780)

relates to #16747

this fixes the icons on the disk encryption view key modal.

<img width="663" alt="image"
src="https://github.com/fleetdm/fleet/assets/1153709/c7ed36b4-9115-4f07-b174-949cf0b03367">


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
---
 .../issue-16747-fix-disk-encryption-key-input |  1 +
 .../InputFieldHiddenContent.tsx               | 22 ++++----
 .../InputFieldHiddenContent/_styles.scss      | 50 +++++++------------
 3 files changed, 30 insertions(+), 43 deletions(-)
 create mode 100644 changes/issue-16747-fix-disk-encryption-key-input

diff --git a/changes/issue-16747-fix-disk-encryption-key-input b/changes/issue-16747-fix-disk-encryption-key-input
new file mode 100644
index 0000000000..32b20e04ac
--- /dev/null
+++ b/changes/issue-16747-fix-disk-encryption-key-input
@@ -0,0 +1 @@
+- fix UI bug for the view disk encryption key input icons
diff --git a/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx b/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx
index 0c9b0a43de..d499da8c30 100644
--- a/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx
+++ b/frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx
@@ -46,15 +46,15 @@ const InputFieldHiddenContent = ({
     return false;
   };
 
-  const renderLabel = () => {
+  const renderCopyShowButtons = () => {
     return (
-      <span className={`${baseClass}__name`}>
-        <span className="buttons">
-          {copyMessage && (
-            <span
-              className={`${baseClass}__copy-message`}
-            >{`${copyMessage} `}</span>
-          )}
+      <div className={`${baseClass}__action-overlay`}>
+        {copyMessage && (
+          <div
+            className={`${baseClass}__copy-message`}
+          >{`${copyMessage} `}</div>
+        )}
+        <div className={`${baseClass}__input-buttons`}>
           <Button
             variant="unstyled"
             className={`${baseClass}__copy-secret-icon`}
@@ -69,8 +69,8 @@ const InputFieldHiddenContent = ({
           >
             <Icon name="eye" />
           </Button>
-        </span>
-      </span>
+        </div>
+      </div>
     );
   };
 
@@ -80,10 +80,10 @@ const InputFieldHiddenContent = ({
         disabled
         inputWrapperClass={`${baseClass}__secret-input`}
         name={name}
-        label={renderLabel()}
         type={showSecret ? "text" : "password"}
         value={value}
       />
+      {renderCopyShowButtons()}
     </div>
   );
 };
diff --git a/frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss b/frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss
index 39cdca6b09..89b07fdaf2 100644
--- a/frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss
@@ -1,13 +1,6 @@
 .input-field-hidden-content {
-  &__secret {
-    display: flex;
-    align-items: center;
-    margin-bottom: $pad-medium;
-  }
-
-  .form-field {
-    margin-bottom: 0;
-  }
+  display: flex;
+  align-items: center;
 
   &__secret-input {
     .form-field__label {
@@ -33,33 +26,26 @@
     }
   }
 
+  &__action-overlay {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+    width: 0;
+    left: -16px;
+  }
+
+  &__input-buttons {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-left: 10px;
+  }
+
   &__copy-message {
-    position: absolute;
-    right: 65px;
     background-color: $ui-light-grey;
     border: solid 1px #e2e4ea;
     border-radius: 10px;
     padding: 2px 6px;
   }
-
-  .buttons {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    right: 16px;
-    top: 12px;
-    height: 16px;
-
-    span {
-      font-weight: $regular;
-    }
-  }
-
-  &__show-secret-icon,
-  &__copy-secret-icon,
-  &__edit-secret-icon,
-  &__delete-secret-icon {
-    padding: 0 $pad-small;
-    margin-left: $pad-xsmall;
-  }
 }