From ff8cc9ef72751a84314db8b8ede6a74ee2853eb3 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 16:16:15 -0600
Subject: [PATCH 1/9] refactor: WP-791 dropdown button menu

- remove most of the redundant code
- use Dropdown not ButtonDropdown
- fix layout of menu and button in DataFilesSidebar
- clean up our .dropdown-menu styles
- use variables for arrow and border
---
 .../DataFilesBreadcrumbs.scss                 | 16 -----
 .../DataFilesSidebar/DataFilesSidebar.jsx     | 10 ++--
 .../DataFilesSidebar.module.scss              |  2 +-
 .../DataFilesSidebar/DataFilesSidebar.scss    | 58 ++++---------------
 .../src/styles/components/dropdown-menu.css   | 37 ++++++------
 5 files changed, 34 insertions(+), 89 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
index e06f9db5c..21683effe 100644
--- a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
+++ b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
@@ -42,32 +42,16 @@
   padding-left: var(--horizontal-buffer);
 }
 
-/* Nested to prevent styles from affecting CMS header dropdown */
 /* HACK: Using ID to increase specificity (until source of problem is fixed) */
 /* HELP: Why does DataFilesSidebar not need such specificity? */
 /* .go-to-button-dropdown { */
 #go-to-button-dropdown {
-  /* To fix menu not showing */
-  /* HELP: Why does DataFilesSidebar not need this fix? */
-  .dropdown-menu {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-  }
-  /* To restyle */
   .dropdown-menu {
     margin-top: 38px;
   }
   .dropdown-menu::before,
   .dropdown-menu::after {
     left: 23px;
-    margin-left: 0;
-  }
-  .dropdown-menu::after {
-    top: -9px;
-  }
-
-  .dropdown-item {
-    display: inline-block;
   }
 }
 
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
index e4976bb7b..d898b126e 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
@@ -5,7 +5,7 @@ import {
   Nav,
   NavItem,
   NavLink,
-  ButtonDropdown,
+  Dropdown,
   DropdownMenu,
   DropdownToggle,
   DropdownItem,
@@ -67,8 +67,8 @@ const DataFilesAddButton = ({ readOnly }) => {
   const writeItemStyle = disabled ? 'read-only' : '';
 
   return (
-    <div id="add-button-wrapper">
-      <ButtonDropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
+    <>
+      <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
         <DropdownToggle
           color="primary"
           id="data-files-add"
@@ -101,8 +101,8 @@ const DataFilesAddButton = ({ readOnly }) => {
             </span>
           </DropdownItem>
         </DropdownMenu>
-      </ButtonDropdown>
-    </div>
+      </Dropdown>
+    </>
   );
 };
 
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss
index b6ca1a642..bf7514796 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss
@@ -13,5 +13,5 @@
 
 .add-button-item {
   padding-bottom: 20px;
-  padding-left: 20px;
+  padding-inline: var(--global-space--section-left);
 }
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
index b2c09a31a..30e022c08 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -10,65 +10,27 @@
   border-radius: 0;
 }
 
-#add-button-wrapper {
-  padding-left: var(--horizontal-buffer);
-}
 #data-files-add {
-  width: 174px;
+  width: 100%;
 }
 
 .data-files-nav {
   padding-top: 20px;
 }
 
-/* Nested to prevent styles from affecting CMS header dropdown */
 .data-files-sidebar {
   .dropdown-menu {
-    border-color: var(--global-color-accent--normal);
-    border-radius: 0;
-    margin: 11px 3px 0;
-    width: 200px;
-    vertical-align: top;
-  }
-  .dropdown-menu::before {
-    position: absolute;
-    top: -10px;
-    left: 67px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--global-color-accent--normal);
-    border-left: 10px solid transparent;
-    margin-left: 20px;
-    content: '';
+    /* To make menu wider than button yet still centered */
+    width: calc(
+      100% + var(--global-space--section-left)
+    );
+    left: calc(
+      var(--global-space--section-left) / -2
+    ) !important; /* to override `inset` from Popper via Reactstrap */
   }
+  .dropdown-menu::before,
   .dropdown-menu::after {
-    top: -9px;
-    left: 68px;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid #ffffff;
-    border-left: 9px solid transparent;
-    margin-left: 20px;
-    content: '';
-  }
-
-  .dropdown-item {
-    padding: 10px 6px;
-    color: var(--global-color-primary--x-dark);
-    font-size: 14px;
-    i {
-      padding-right: 19px;
-      font-size: 20px;
-      vertical-align: middle;
-    }
-    &:hover {
-      color: var(--global-color-primary--x-dark);
-    }
-  }
-  .dropdown-item:focus,
-  .dropdown-item:hover {
-    /* FAQ: Before FP-1083, value was #E6E0FB, which matched Design
-            and was `--global-color-accent` at 25% opacity on white…
-            which is what `--global-color-accent--weak` is now */
-    background-color: var(--global-color-accent--weak);
+    left: calc(50% - var(--arrow-size));
   }
 }
 
diff --git a/client/src/styles/components/dropdown-menu.css b/client/src/styles/components/dropdown-menu.css
index 3a8cb8040..86a77d582 100644
--- a/client/src/styles/components/dropdown-menu.css
+++ b/client/src/styles/components/dropdown-menu.css
@@ -6,32 +6,34 @@ A menu of navigation elements.
 Styleguide Components.Dropdown
 */
 
-/* Nested to prevent styles from affecting CMS header dropdown */
-.workbench-wrapper {
+.workbench-wrapper /* nested so CMS header dropdown is unaffected */ {
   .dropdown-menu {
-    border-color: var(--global-color-accent--normal);
-    border-radius: 0;
-    margin-top: 11px;
-    padding: 0;
-    min-width: 200px;
-    width: auto;
-    vertical-align: top;
+    --border-width: 1px;
+    --border-color: var(--global-color-accent--normal);
+    --arrow-size: 10px;
+
+    margin-top: var(--arrow-size); /* to make space for arrow */
+
+    padding-block: unset; /* to undo Bootstrap */
+    border-radius: unset; /* to undo Bootstrap */
+
+    border: var(--border-width) solid var(--border-color);
   }
   .dropdown-menu::before,
   .dropdown-menu::after {
     position: absolute;
-    left: 65px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--global-color-accent--normal);
-    border-left: 10px solid transparent;
-    margin-left: 20px;
+
+    border-right: var(--arrow-size) solid transparent;
+    border-bottom: var(--arrow-size) solid var(--global-color-accent--normal);
+    border-left: var(--arrow-size) solid transparent;
+
     content: '';
   }
   .dropdown-menu::before {
-    top: -10px;
+    top: calc( var(--arrow-size) * -1 );
   }
   .dropdown-menu::after {
-    top: -9px;
+    top: calc(( var(--arrow-size) - var(--border-width)) * -1 );
     border-bottom-color: var(--global-color-primary--xx-light);
   }
 
@@ -50,9 +52,6 @@ Styleguide Components.Dropdown
   }
   .dropdown-item:focus,
   .dropdown-item:hover {
-    /* FAQ: Before FP-1083, value was #E6E0FB, which matched Design
-            and was `--global-color-accent` at 25% opacity on white…
-            which is what `--global-color-accent--weak` is now */
     background-color: var(--global-color-accent--weak);
   }
 }

From bb73411cb9817ea4e89fdce6efc09b1effde86de Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:08:22 -0600
Subject: [PATCH 2/9] =?UTF-8?q?refactor:=20WP-791=20DataFilesBread?=
 =?UTF-8?q?=E2=80=A6=20dropdown=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`….scss`:
- use class not ID
- position via `top` not `margin-top`
- explain menu position's "magic" value
- explain why positioning is necessary[^1]

`….jsx`:
- use class not ID
use Dropdown not ButtonDropdown[^2]

[^1]: Not desired, but necessary if we use our custom <Button> as is.
[^2]: I don't see ButtonDropdown in latest ReactStrap (v9).
---
 .../DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss  | 13 ++++++-------
 .../DataFilesDropdown/DataFilesDropdown.jsx         |  7 +++----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
index 21683effe..e40410f12 100644
--- a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
+++ b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
@@ -42,12 +42,11 @@
   padding-left: var(--horizontal-buffer);
 }
 
-/* HACK: Using ID to increase specificity (until source of problem is fixed) */
-/* HELP: Why does DataFilesSidebar not need such specificity? */
-/* .go-to-button-dropdown { */
-#go-to-button-dropdown {
+.go-to-button-dropdown {
   .dropdown-menu {
-    margin-top: 38px;
+    /* To push menu down by the height of its button */
+    /* FAQ: Required because `tag={Button}` loses auto-position of menu */
+    top: 28px !important; /* to override `inset` from Popper via Reactstrap */
   }
   .dropdown-menu::before,
   .dropdown-menu::after {
@@ -69,12 +68,12 @@
   padding-left: 20px;
 }
 
-#go-to-button-dropdown .complex-dropdown-item-root,
+.go-to-button-dropdown .complex-dropdown-item-root,
 .complex-dropdown-item-project {
   display: flex !important;
 }
 
-#go-to-button-dropdown .link-hover:hover {
+.go-to-button-dropdown .link-hover:hover {
   text-decoration: none;
 }
 
diff --git a/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx b/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx
index 246f72788..affe12ef2 100644
--- a/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx
+++ b/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Link, useLocation } from 'react-router-dom';
 import { Button } from '_common';
 import {
+  Dropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
-  ButtonDropdown,
 } from 'reactstrap';
 import { useSystemDisplayName, useSystems } from 'hooks/datafiles';
 import '../DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss';
@@ -75,10 +75,9 @@ const BreadcrumbsDropdown = ({
   const sliceStart = scheme === 'projects' && systemName ? 0 : 1;
   return (
     <div id="path-button-wrapper">
-      <ButtonDropdown
+      <Dropdown
         isOpen={dropdownOpen}
         toggle={toggleDropdown}
-        id="go-to-button-dropdown"
         className="go-to-button-dropdown"
       >
         <DropdownToggle tag={Button}>Go to ...</DropdownToggle>
@@ -132,7 +131,7 @@ const BreadcrumbsDropdown = ({
             </DropdownItem>
           </Link>
         </DropdownMenu>
-      </ButtonDropdown>
+      </Dropdown>
     </div>
   );
 };

From 1b644edf5382dc7d549eea7d98def726e220fcad Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:17:05 -0600
Subject: [PATCH 3/9] chore: remove class data-files-btn

This class is assigned to buttons that:
- **either** have Bootstrap btn-primary
    (in which case the `.workbench-content .btn-primary` styles it)
- **or** are our custom `<Button>`
    (in which case the `composes: c-button` styles it)
---
 .../DataFilesModalTables/DataFilesModalListingTable.jsx  | 2 +-
 .../_cells/ProjectRoleSelector.jsx                       | 1 -
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.jsx      | 1 -
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.scss     | 9 ---------
 4 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
index 93f318597..6072ef4e1 100644
--- a/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
+++ b/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
@@ -120,7 +120,7 @@ const DataFilesModalButtonCell = ({
       <span>
         <Button
           type="primary"
-          className="float-right data-files-btn"
+          className="float-right"
           disabled={disabled}
           onClick={onClick}
         >
diff --git a/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx b/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
index 8dcdaf233..f6fd0bf86 100644
--- a/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
+++ b/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
@@ -75,7 +75,6 @@ const ProjectRoleSelector = ({ projectId, username }) => {
       {data.role !== selectedRole && !isFetching && (
         <Button
           type="primary"
-          className="data-files-btn"
           onClick={() =>
             setProjectRole({ oldRole: data.role, newRole: selectedRole })
           }
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
index d898b126e..5340cbb1c 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
@@ -72,7 +72,6 @@ const DataFilesAddButton = ({ readOnly }) => {
         <DropdownToggle
           color="primary"
           id="data-files-add"
-          className="data-files-btn"
         >
           + Add
         </DropdownToggle>
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
index 30e022c08..519d829d3 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -1,14 +1,5 @@
 @import '../../../styles/components/dropdown-menu.css';
 
-.data-files-btn {
-  background-color: var(--global-color-accent--normal);
-  border-color: var(--global-color-accent--normal);
-  border-radius: 0;
-}
-
-.data-files-btn-cancel {
-  border-radius: 0;
-}
 
 #data-files-add {
   width: 100%;

From a678c6ff16cccf18f30ecff0eb9fba44c2e81cc9 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:34:00 -0600
Subject: [PATCH 4/9] doc: save `refactor/WP-791-dropdown-menu` PR desc

---
 refactor-WP-791-dropdown-menu-pr-desc.md | 50 ++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 refactor-WP-791-dropdown-menu-pr-desc.md

diff --git a/refactor-WP-791-dropdown-menu-pr-desc.md b/refactor-WP-791-dropdown-menu-pr-desc.md
new file mode 100644
index 000000000..70fd54504
--- /dev/null
+++ b/refactor-WP-791-dropdown-menu-pr-desc.md
@@ -0,0 +1,50 @@
+## Overview
+
+Refactor the styles for Data Files dropdown menus to:
+- share more CSS
+- use clearer CSS
+
+## Related
+
+* [WP-791](https://tacc-main.atlassian.net/browse/WP-791)
+* inspired by https://github.com/TACC/Core-Portal/pull/1018#pullrequestreview-2476250609
+
+## Changes
+
+**`.dropdown-menu`**:
+- remove redundant code
+- use `<Dropdown>` not `<ButtonDropdown>`[^1]
+- clean up styles
+- use CSS var's for arrow and border
+
+**`DataFilesBreadcrumbs`**:
+- fix layout of menu and button
+
+**`DataFilesBreadcrumbs`**:
+- use class not ID
+- position via `top` not `margin-top`
+- explain menu position value
+- explain why positioning is necessary[^2]
+
+[^1]: I don't see `ButtonDropdown` in [latest ReactStrap (v9)](https://reactstrap.github.io/?path=/docs/components-dropdown--dropdown).
+[^2]: Not desired, but necessary if we use our custom `<Button>` as is.
+
+## Testing
+
+1. Open Data Files.
+2. Click "Add +" button.
+    - Verify button is centered.
+    - Verify menu is centered.
+    - Verify menu is wider than button.
+    - Verify elements are otherwise unchanged.
+4. Click "Go to ..." button.
+    - Verify elements are unchanged.
+
+## UI
+
+| `DataFilesDropdown` | `DataFilesSidebar` |
+| - | - |
+| <img width="400" alt="DataFilesDropdown" src="https://github.com/user-attachments/assets/c0a35d5b-d304-4625-b94e-6ab7888ec3e4"> | <img width="400" alt="DataFilesSidebar" src="https://github.com/user-attachments/assets/7bec0d60-ec77-45d7-b53d-7c0688d8c75b"> |
+
+## Notes
+

From d6f820b27795a2fb6ed81278c49dda9db2d5cb0b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:34:23 -0600
Subject: [PATCH 5/9] Revert "chore: remove class data-files-btn"

This reverts commit 1b644edf5382dc7d549eea7d98def726e220fcad.
---
 .../DataFilesModalTables/DataFilesModalListingTable.jsx  | 2 +-
 .../_cells/ProjectRoleSelector.jsx                       | 1 +
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.jsx      | 1 +
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.scss     | 9 +++++++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
index 6072ef4e1..93f318597 100644
--- a/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
+++ b/client/src/components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
@@ -120,7 +120,7 @@ const DataFilesModalButtonCell = ({
       <span>
         <Button
           type="primary"
-          className="float-right"
+          className="float-right data-files-btn"
           disabled={disabled}
           onClick={onClick}
         >
diff --git a/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx b/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
index f6fd0bf86..8dcdaf233 100644
--- a/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
+++ b/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
@@ -75,6 +75,7 @@ const ProjectRoleSelector = ({ projectId, username }) => {
       {data.role !== selectedRole && !isFetching && (
         <Button
           type="primary"
+          className="data-files-btn"
           onClick={() =>
             setProjectRole({ oldRole: data.role, newRole: selectedRole })
           }
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
index 5340cbb1c..d898b126e 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
@@ -72,6 +72,7 @@ const DataFilesAddButton = ({ readOnly }) => {
         <DropdownToggle
           color="primary"
           id="data-files-add"
+          className="data-files-btn"
         >
           + Add
         </DropdownToggle>
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
index 519d829d3..30e022c08 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -1,5 +1,14 @@
 @import '../../../styles/components/dropdown-menu.css';
 
+.data-files-btn {
+  background-color: var(--global-color-accent--normal);
+  border-color: var(--global-color-accent--normal);
+  border-radius: 0;
+}
+
+.data-files-btn-cancel {
+  border-radius: 0;
+}
 
 #data-files-add {
   width: 100%;

From 2840e4284db6ed4bd432bfade26b662f3ef53a87 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:03:14 -0600
Subject: [PATCH 6/9] style: npm run prettier:fix

---
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.scss          | 4 +---
 client/src/styles/components/dropdown-menu.css                | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
index 30e022c08..2cea65985 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -21,9 +21,7 @@
 .data-files-sidebar {
   .dropdown-menu {
     /* To make menu wider than button yet still centered */
-    width: calc(
-      100% + var(--global-space--section-left)
-    );
+    width: calc(100% + var(--global-space--section-left));
     left: calc(
       var(--global-space--section-left) / -2
     ) !important; /* to override `inset` from Popper via Reactstrap */
diff --git a/client/src/styles/components/dropdown-menu.css b/client/src/styles/components/dropdown-menu.css
index 86a77d582..039ae65e6 100644
--- a/client/src/styles/components/dropdown-menu.css
+++ b/client/src/styles/components/dropdown-menu.css
@@ -30,10 +30,10 @@ Styleguide Components.Dropdown
     content: '';
   }
   .dropdown-menu::before {
-    top: calc( var(--arrow-size) * -1 );
+    top: calc(var(--arrow-size) * -1);
   }
   .dropdown-menu::after {
-    top: calc(( var(--arrow-size) - var(--border-width)) * -1 );
+    top: calc(( var(--arrow-size) - var(--border-width)) * -1);
     border-bottom-color: var(--global-color-primary--xx-light);
   }
 

From 1d0317bed4d088bdc1b007b320539840762769df Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:12:38 -0600
Subject: [PATCH 7/9] chore: remove unnecessary `!important`

---
 .../DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
index e40410f12..f09af30df 100644
--- a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
+++ b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
@@ -68,9 +68,9 @@
   padding-left: 20px;
 }
 
-.go-to-button-dropdown .complex-dropdown-item-root,
+.complex-dropdown-item-root,
 .complex-dropdown-item-project {
-  display: flex !important;
+  display: flex;
 }
 
 .go-to-button-dropdown .link-hover:hover {

From 5a54861d99695f0f02823972f02aab26c2d05c47 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:13:17 -0600
Subject: [PATCH 8/9] enhance: use `<DropdownItem divider>` consistently

---
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.jsx          | 1 +
 .../DataFiles/DataFilesSidebar/DataFilesSidebar.scss         | 1 -
 client/src/styles/components/dropdown-menu.css               | 5 +++++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
index d898b126e..10580e6ce 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
@@ -89,6 +89,7 @@ const DataFilesAddButton = ({ readOnly }) => {
               <i className="icon-folder" /> Shared Workspace
             </DropdownItem>
           )}
+          <DropdownItem divider />
           <DropdownItem
             className={`complex-dropdown-item ${styles[writeItemStyle]}`}
             onClick={toggleUploadModal}
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
index 2cea65985..32be08894 100644
--- a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
+++ b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -33,7 +33,6 @@
 }
 
 .complex-dropdown-item {
-  border-top: 1px solid #707070;
   display: flex;
 }
 
diff --git a/client/src/styles/components/dropdown-menu.css b/client/src/styles/components/dropdown-menu.css
index 039ae65e6..6c7ae6df8 100644
--- a/client/src/styles/components/dropdown-menu.css
+++ b/client/src/styles/components/dropdown-menu.css
@@ -54,4 +54,9 @@ Styleguide Components.Dropdown
   .dropdown-item:hover {
     background-color: var(--global-color-accent--weak);
   }
+
+  .dropdown-divider {
+    margin-block: 0.25em;
+    border-color: var(--global-color-primary--dark);
+  }
 }

From 958069bfe89241e49b56f8151c4d6518b21d9255 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:39:11 -0600
Subject: [PATCH 9/9] chore: refactor-WP-791-dropdown-menu-pr-desc.md

---
 refactor-WP-791-dropdown-menu-pr-desc.md | 50 ------------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 refactor-WP-791-dropdown-menu-pr-desc.md

diff --git a/refactor-WP-791-dropdown-menu-pr-desc.md b/refactor-WP-791-dropdown-menu-pr-desc.md
deleted file mode 100644
index 70fd54504..000000000
--- a/refactor-WP-791-dropdown-menu-pr-desc.md
+++ /dev/null
@@ -1,50 +0,0 @@
-## Overview
-
-Refactor the styles for Data Files dropdown menus to:
-- share more CSS
-- use clearer CSS
-
-## Related
-
-* [WP-791](https://tacc-main.atlassian.net/browse/WP-791)
-* inspired by https://github.com/TACC/Core-Portal/pull/1018#pullrequestreview-2476250609
-
-## Changes
-
-**`.dropdown-menu`**:
-- remove redundant code
-- use `<Dropdown>` not `<ButtonDropdown>`[^1]
-- clean up styles
-- use CSS var's for arrow and border
-
-**`DataFilesBreadcrumbs`**:
-- fix layout of menu and button
-
-**`DataFilesBreadcrumbs`**:
-- use class not ID
-- position via `top` not `margin-top`
-- explain menu position value
-- explain why positioning is necessary[^2]
-
-[^1]: I don't see `ButtonDropdown` in [latest ReactStrap (v9)](https://reactstrap.github.io/?path=/docs/components-dropdown--dropdown).
-[^2]: Not desired, but necessary if we use our custom `<Button>` as is.
-
-## Testing
-
-1. Open Data Files.
-2. Click "Add +" button.
-    - Verify button is centered.
-    - Verify menu is centered.
-    - Verify menu is wider than button.
-    - Verify elements are otherwise unchanged.
-4. Click "Go to ..." button.
-    - Verify elements are unchanged.
-
-## UI
-
-| `DataFilesDropdown` | `DataFilesSidebar` |
-| - | - |
-| <img width="400" alt="DataFilesDropdown" src="https://github.com/user-attachments/assets/c0a35d5b-d304-4625-b94e-6ab7888ec3e4"> | <img width="400" alt="DataFilesSidebar" src="https://github.com/user-attachments/assets/7bec0d60-ec77-45d7-b53d-7c0688d8c75b"> |
-
-## Notes
-