From d56630152cb6c96cca7e2f38d24e06f42a156815 Mon Sep 17 00:00:00 2001
From: Taylor Grafft <tgrafft@wireless-10-147-37-138.public.utexas.edu>
Date: Mon, 2 Oct 2023 09:05:24 -0500
Subject: [PATCH] task/WP-65-DropdownViewFullPath-v2

---
 .../DataFilesBreadcrumbs.jsx                  |  8 +-----
 .../DataFilesBreadcrumbs.scss                 | 28 ++++---------------
 .../_common/TextCopyField/TextCopyField.jsx   |  1 +
 client/src/styles/tools/mixins.scss           |  2 +-
 4 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx
index 0a82b8ee6..29b421ffb 100644
--- a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx
+++ b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx
@@ -216,13 +216,7 @@ const DataFilesBreadcrumbs = ({
           toggle={toggleDropdown}
           className="go-to-button-dropdown"
         >
-          <DropdownToggle
-            color="secondary"
-            id="data-files-path"
-            className="data-files-btn"
-          >
-            Go to ...
-          </DropdownToggle>
+          <DropdownToggle tag={Button}>Go to ...</DropdownToggle>
           <DropdownMenu>
             {reversedPath.slice(1, reversedPath.length).map((path, index) => {
               const folderName = path.split('/').pop();
diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
index 3987afe3a..ccccc2f25 100644
--- a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
+++ b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
@@ -37,45 +37,27 @@
   }
 }
 
-.data-files-btn {
-  background-color: var(--global-color-accent--normal);
-  border-color: var(--global-color-accent--normal);
-  border-radius: 0;
-  font-family: 'Roboto, sans-serif';
-}
-
-.data-files-btn-cancel {
-  border-radius: 0;
-}
-
 #path-button-wrapper {
   padding-left: var(--horizontal-buffer);
 }
-#data-files-path {
-  font-size: 12px;
-  padding: 5px 10px;
-  border-color: #707070;
-}
-
-.data-files-nav {
-  padding-top: 20px;
-}
 
 /* HACK: Quick solution to prevent styles from cascading into header dropdown */
 .go-to-button-dropdown {
   .dropdown-menu {
+    opacity: 1 !important;
     border-color: var(--global-color-accent--normal);
     border-radius: 0;
-    margin-top: 11px;
+    margin-top: 34px;
     padding: 0;
     width: 200px;
     vertical-align: top;
+    pointer-events: auto !important;
   }
   .dropdown-menu::before,
   .dropdown-menu::after {
     position: absolute;
     top: -10px;
-    left: 15px;
+    left: 23px;
     border-right: 10px solid transparent;
     border-bottom: 10px solid var(--global-color-accent--normal);
     border-left: 10px solid transparent;
@@ -83,7 +65,7 @@
   }
   .dropdown-menu::after {
     top: -9px;
-    left: 15px;
+    left: 23px;
     border-bottom: 10px solid #ffffff;
   }
 
diff --git a/client/src/components/_common/TextCopyField/TextCopyField.jsx b/client/src/components/_common/TextCopyField/TextCopyField.jsx
index 9ea4995db..29f99bac4 100644
--- a/client/src/components/_common/TextCopyField/TextCopyField.jsx
+++ b/client/src/components/_common/TextCopyField/TextCopyField.jsx
@@ -43,6 +43,7 @@ const TextCopyField = ({ value, placeholder, renderType }) => {
           <div className="text-right mt-3">
             <CopyToClipboard text={value}>
               <Button
+                className={styles['copy-button']}
                 onClick={onCopy}
                 disabled={isEmpty}
                 type="secondary"
diff --git a/client/src/styles/tools/mixins.scss b/client/src/styles/tools/mixins.scss
index a0df770df..a1470e72b 100644
--- a/client/src/styles/tools/mixins.scss
+++ b/client/src/styles/tools/mixins.scss
@@ -1,5 +1,5 @@
 @mixin truncate-with-ellipsis {
-  overflow: visible;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }