Make dropdown menu appear on top when not enough space

apps/app/src/client/components/Common/CopyDropdown/CopyDropdown.jsx

@@ -126,7 +126,9 @@ export const CopyDropdown = (props) => {
         </DropdownToggle>
 
         <DropdownMenu
+          className={`${styles['dropdown-menu']}`}
           strategy="fixed"
+          container="body"
         >
           <div className="d-flex align-items-center justify-content-between">
             <DropdownItem header className="px-3">

apps/app/src/client/components/Common/CopyDropdown/CopyDropdown.module.scss

@@ -1,12 +1,7 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/ui/scss/atoms/btn-muted';
 
-.grw-copy-dropdown :global {
-  .btn.btn-copy {
-    @include btn-muted.colorize(bs.$gray-500);
-  }
-
-  .dropdown-menu {
+.dropdown-menu :global {
     min-width: 310px;
     max-width: 375px;
 
@@ -30,4 +25,9 @@
       word-break: break-all;
     }
   }
+
+.grw-copy-dropdown :global {
+  .btn.btn-copy {
+    @include btn-muted.colorize(bs.$gray-500);
+  }
 }