From 08d895b2e0a6111f977dccfd80fe93a4afc182d5 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Fri, 17 Nov 2023 09:48:32 -0500
Subject: [PATCH] fix: list more info menu styles (#696)

---
 src/files-and-videos/generic/FileMenu.jsx     |  2 +-
 src/files-and-videos/generic/messages.js      |  4 ++++
 .../table-custom-columns/MoreInfoColumn.jsx   | 19 ++++---------------
 src/files-and-videos/index.scss               | 19 +++++++++++++++++++
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/files-and-videos/generic/FileMenu.jsx b/src/files-and-videos/generic/FileMenu.jsx
index 8a84511cd..6a25fc891 100644
--- a/src/files-and-videos/generic/FileMenu.jsx
+++ b/src/files-and-videos/generic/FileMenu.jsx
@@ -36,7 +36,7 @@ const FileMenu = ({
         <Dropdown.Item
           onClick={() => navigator.clipboard.writeText(id)}
         >
-          Copy video ID
+          {intl.formatMessage(messages.copyVideoIdTitle)}
         </Dropdown.Item>
       ) : (
         <>
diff --git a/src/files-and-videos/generic/messages.js b/src/files-and-videos/generic/messages.js
index 8ee8ce0a9..757e871f2 100644
--- a/src/files-and-videos/generic/messages.js
+++ b/src/files-and-videos/generic/messages.js
@@ -49,6 +49,10 @@ const messages = defineMessages({
     id: 'course-authoring.files-and-uploads.file-info.usage.notInUse.message',
     defaultMessage: 'Currently not in use',
   },
+  copyVideoIdTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.copyVideoIdTitle',
+    defaultMessage: 'Copy video ID',
+  },
   copyStudioUrlTitle: {
     id: 'course-authoring.files-and-uploads.cardMenu.copyStudioUrlTitle',
     defaultMessage: 'Copy Studio Url',
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
index 0dfd12880..b4e740aa4 100644
--- a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
@@ -44,37 +44,31 @@ const MoreInfoColumn = ({
         alt="More info icon button"
       />
       <ModalPopup
-        placement="left"
+        placement="bottom-end"
         positionRef={target}
         isOpen={isOpen}
         onClose={close}
         onEscapeKey={close}
-        style={{
-
-        }}
       >
         <Menu
-          className="border border-light-400"
-          style={{ overflowX: 'hidden', boxShadow: '0px 0px 0px #000', maxHeight: '500px' }}
+          className="more-info-menu"
         >
           {wrapperType === 'video' ? (
             <MenuItem
               as={Button}
               variant="tertiary"
-              size="inline"
               onClick={() => {
                 navigator.clipboard.writeText(id);
                 close();
               }}
             >
-              Copy video ID
+              {intl.formatMessage(messages.copyVideoIdTitle)}
             </MenuItem>
           ) : (
             <>
               <MenuItem
                 as={Button}
                 variant="tertiary"
-                size="inline"
                 onClick={() => {
                   navigator.clipboard.writeText(portableUrl);
                   close();
@@ -85,7 +79,6 @@ const MoreInfoColumn = ({
               <MenuItem
                 as={Button}
                 variant="tertiary"
-                size="inline"
                 onClick={() => {
                   navigator.clipboard.writeText(externalUrl);
                   close();
@@ -96,7 +89,6 @@ const MoreInfoColumn = ({
               <MenuItem
                 as={Button}
                 variant="tertiary"
-                size="inline"
                 onClick={() => handleLock(id, !locked)}
               >
                 {locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)}
@@ -106,7 +98,6 @@ const MoreInfoColumn = ({
           <MenuItem
             as={Button}
             variant="tertiary"
-            size="inline"
             onClick={() => handleBulkDownload(
               [{ original: { id, displayName } }],
             )}
@@ -116,16 +107,14 @@ const MoreInfoColumn = ({
           <MenuItem
             as={Button}
             variant="tertiary"
-            size="inline"
             onClick={() => handleOpenFileInfo(row.original)}
           >
             {intl.formatMessage(messages.infoTitle)}
           </MenuItem>
-          <hr className="m-0" />
+          <hr className="my-2" />
           <MenuItem
             as={Button}
             variant="tertiary"
-            size="inline"
             data-testid="open-delete-confirmation-button"
             onClick={() => {
               handleOpenDeleteConfirmation([{ original: row.original }]);
diff --git a/src/files-and-videos/index.scss b/src/files-and-videos/index.scss
index 632267368..ffd94b5a1 100644
--- a/src/files-and-videos/index.scss
+++ b/src/files-and-videos/index.scss
@@ -27,6 +27,25 @@
       }
     }
   }
+
+  .more-info-menu {
+    padding: 8px 0;
+    overflow-x: hidden;
+    max-height: 500px;
+    width: 321px;
+
+    @include pgn-box-shadow(2, "down");
+
+    .pgn__menu-item {
+      width: 100%;
+      justify-content: start;
+
+      &.focus,
+      &:focus {
+        font-weight: 500;
+      }
+    }
+  }
 }
 
 .pgn__form-control-set-inline {