update design for long text

apps/app/src/components/Bookmarks/BookmarkFolderMenu.module.scss

@@ -0,0 +1,14 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.grw-bookmark-folder-dropdown :global {
+  .grw-bookmark-folder-menu {
+    max-width: 576px;
+
+    .grw-bookmark-folder-menu-item-folder-first {
+      padding-left: 40px;
+    }
+    .grw-bookmark-folder-menu-item-folder-second {
+      padding-left: 60px;
+    }
+  }
+}

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -12,6 +12,7 @@ import { useSWRMUTxPageInfo } from '~/stores/page';
 
 import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
 
+import styles from './BookmarkFolderMenu.module.scss';
 
 type BookmarkFolderMenuProps = {
   isOpen: boolean,
@@ -129,7 +130,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
             <DropdownItem divider />
             <div key="root">
               <div
-                className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
+                className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action px-4"
                 tabIndex={0}
                 role="menuitem"
                 onClick={e => onMenuItemClickHandler(e, 'root')}
@@ -144,8 +145,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
             {bookmarkFolders?.map(folder => (
               <React.Fragment key={`bookmark-folders-${folder._id}`}>
                 <div
-                  className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
-                  style={{ paddingLeft: '40px' }}
+                  className="dropdown-item grw-bookmark-folder-menu-item grw-bookmark-folder-menu-item-folder-first list-group-item list-group-item-action"
                   tabIndex={0}
                   role="menuitem"
                   onClick={e => onMenuItemClickHandler(e, folder._id)}
@@ -159,8 +159,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
                 {folder.children?.map(child => (
                   <div key={child._id}>
                     <div
-                      className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
-                      style={{ paddingLeft: '60px' }}
+                      className="dropdown-item grw-bookmark-folder-menu-item grw-bookmark-folder-menu-item-folder-second list-group-item list-group-item-action"
                       tabIndex={0}
                       role="menuitem"
                       onClick={e => onMenuItemClickHandler(e, child._id)}
@@ -185,15 +184,14 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     <UncontrolledDropdown
       isOpen={isOpen}
       onToggle={toggleHandler}
-      direction={isBookmarkFolderExists ? 'up' : 'down'}
-      className="grw-bookmark-folder-dropdown"
+      className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}
     >
       {children}
       <DropdownMenu
         end
         persist
         strategy="fixed"
-        className="grw-bookmark-folder-menu"
+        className="z-1 grw-bookmark-folder-menu"
       >
         { renderBookmarkMenuItem() }
       </DropdownMenu>

apps/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -19,7 +19,7 @@ export const BookmarkFolderMenuItem: React.FC<{
         onChange={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       />
-      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0 form-label">
+      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0 form-label text-truncate">
         {itemName}
       </label>
     </div>