update responsive design

apps/app/_obsolete/src/styles/theme/_apply-colors-light.scss

@@ -304,18 +304,16 @@
   }
 
   // Bookmark dropdown menu
-  .grw-bookmark-folder-dropdown  {
-    .grw-bookmark-folder-menu {
-      .form-control{
-        &:focus {
-          color: $body-color
-        }
+  .grw-bookmark-folder-menu {
+    .form-control{
+      &:focus {
+        color: $body-color
       }
-      .grw-bookmark-folder-menu-item {
-        @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
-        .grw-bookmark-folder-menu-item-title {
-          color: $body-color
-        }
+    }
+    .grw-bookmark-folder-menu-item {
+      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
+      .grw-bookmark-folder-menu-item-title {
+        color: $body-color
       }
     }
   }

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

@@ -1,14 +1,12 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-.grw-bookmark-folder-dropdown :global {
-  .grw-bookmark-folder-menu {
-    max-width: 576px;
+.grw-bookmark-folder-menu  :global {
+  max-width: 75%;
 
-    .grw-bookmark-folder-menu-item-folder-first {
-      padding-left: 40px;
-    }
-    .grw-bookmark-folder-menu-item-folder-second {
-      padding-left: 60px;
-    }
+  .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

@@ -117,7 +117,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
         <DropdownItem
           toggle={false}
           onClick={onUnbookmarkHandler}
-          className="grw-bookmark-folder-menu-item text-danger"
+          className="grw-bookmark-folder-menu-item text-danger text-truncate"
         >
           <span className="material-symbols-outlined">bookmark</span>{' '}
           <span className="mx-2">
@@ -184,14 +184,14 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     <UncontrolledDropdown
       isOpen={isOpen}
       onToggle={toggleHandler}
-      className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}
     >
       {children}
       <DropdownMenu
         end
         persist
         strategy="fixed"
-        className="z-1 grw-bookmark-folder-menu"
+        container="body"
+        className={`grw-bookmark-folder-menu ${styles['grw-bookmark-folder-menu']}`}
       >
         { renderBookmarkMenuItem() }
       </DropdownMenu>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -1,5 +1,6 @@
 
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -46,7 +47,7 @@ const DeleteBookmarkFolderModal: FC = () => {
         {t('bookmark_folder.delete_modal.modal_header_label')}
       </ModalHeader>
       <ModalBody>
-        <div className="pb-1">
+        <div className="pb-1 text-break">
           <label className="form-label">{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
           <FolderIcon isOpen={false} /> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
         </div>