From db4d53ec43834472dce5aab106ed44a568d0ae0d Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Thu, 18 Apr 2024 19:25:11 +0900
Subject: [PATCH 1/9] Change appearance Tag button and Search button when edit
 mode

---
 apps/app/src/components/PageControls/PageControls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/PageControls/PageControls.tsx b/apps/app/src/components/PageControls/PageControls.tsx
index 9d8e0c16249..0a7553fda6c 100644
--- a/apps/app/src/components/PageControls/PageControls.tsx
+++ b/apps/app/src/components/PageControls/PageControls.tsx
@@ -58,7 +58,7 @@ const Tags = (props: TagsProps): JSX.Element => {
         onClick={onClickEditTagsButton}
       >
         <span className="material-symbols-outlined me-1">local_offer</span>
-        Tags
+        <span className="d-none d-sm-inline">Tags</span>
       </button>
     </div>
   );
@@ -273,7 +273,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
 
   return (
     <div className={`${styles['grw-page-controls']} hstack gap-2`} ref={pageControlsRef}>
-      { isDeviceLargerThanMd && (
+      { isViewMode && isDeviceLargerThanMd && (
         <SearchButton />
       )}
 

From d7279c0e7cef5b4f16be4963de3ef50ec272104c Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Tue, 23 Apr 2024 19:07:46 +0900
Subject: [PATCH 2/9] Disappear hstack when editor mode less than lg

---
 apps/app/src/components/PageControls/PageControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/PageControls/PageControls.tsx b/apps/app/src/components/PageControls/PageControls.tsx
index 0a7553fda6c..1a7e6a2b423 100644
--- a/apps/app/src/components/PageControls/PageControls.tsx
+++ b/apps/app/src/components/PageControls/PageControls.tsx
@@ -284,7 +284,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
       )}
 
       { !hideSubControls && (
-        <div className="hstack gap-1">
+        <div className={`hstack gap-1 ${isViewMode && editorMode === EditorMode.View ? '' : 'd-none d-lg-flex'}`}>
           {revisionId != null && _isIPageInfoForOperation && (
             <SubscribeButton
               status={pageInfo.subscriptionStatus}

From dc8845675a0c2d20c7607d8b8886cc9a32ee8456 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Tue, 23 Apr 2024 20:59:04 +0900
Subject: [PATCH 3/9] Fix menu button appearance when editor mode

---
 .../PageEditor/EditorNavbar/EditorNavbar.tsx         |  2 +-
 .../src/components/PageEditor/EditorNavbarBottom.tsx | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
index 6797a4a0363..078685bb4ef 100644
--- a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
+++ b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
@@ -12,7 +12,7 @@ export const EditorNavbar = (): JSX.Element => {
   const { data: editingUsers } = useEditingUsers();
 
   return (
-    <div className={`${moduleClass} d-flex justify-content-between px-4 py-1`}>
+    <div className={`${moduleClass} d-flex justify-content-between ps-3 ps-md-5 ps-xl-4 pe-4 py-1`}>
       <PageHeader />
       <EditingUserList
         userList={editingUsers?.userList ?? []}
diff --git a/apps/app/src/components/PageEditor/EditorNavbarBottom.tsx b/apps/app/src/components/PageEditor/EditorNavbarBottom.tsx
index 4cdd7725ffd..b892da8a67d 100644
--- a/apps/app/src/components/PageEditor/EditorNavbarBottom.tsx
+++ b/apps/app/src/components/PageEditor/EditorNavbarBottom.tsx
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
 
+import { useDrawerOpened } from '~/stores/ui';
+
 import styles from './EditorNavbarBottom.module.scss';
 
 const moduleClass = styles['grw-editor-navbar-bottom'];
@@ -8,9 +10,19 @@ const SavePageControls = dynamic(() => import('~/components/SavePageControls').t
 const OptionsSelector = dynamic(() => import('~/components/PageEditor/OptionsSelector').then(mod => mod.OptionsSelector), { ssr: false });
 
 const EditorNavbarBottom = (): JSX.Element => {
+
+  const { mutate: mutateDrawerOpened } = useDrawerOpened();
+
   return (
     <div className="border-top" data-testid="grw-editor-navbar-bottom">
       <div className={`flex-expand-horiz align-items-center p-2 ps-md-3 pe-md-4 ${moduleClass}`}>
+        <a
+          role="button"
+          className="nav-link btn-lg p-2 d-md-none me-3 opacity-50"
+          onClick={() => mutateDrawerOpened(true)}
+        >
+          <span className="material-symbols-outlined fs-2">reorder</span>
+        </a>
         <form className="me-auto">
           <OptionsSelector />
         </form>

From d09c34b768a782873672170417e14537a7a9c4b9 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Tue, 23 Apr 2024 21:04:26 +0900
Subject: [PATCH 4/9] Adjust pagetitle and pagepath appearance when moblie
 editor

---
 apps/app/src/components/PageControls/PageControls.tsx     | 2 +-
 .../PageEditor/EditorNavbar/EditorNavbar.module.scss      | 5 +++++
 apps/app/src/components/PageHeader/PageHeader.tsx         | 2 +-
 .../src/components/PageHeader/PagePathHeader.module.scss  | 8 ++++++++
 .../src/components/PageHeader/PageTitleHeader.module.scss | 8 ++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/PageControls/PageControls.tsx b/apps/app/src/components/PageControls/PageControls.tsx
index 1a7e6a2b423..61e51244f62 100644
--- a/apps/app/src/components/PageControls/PageControls.tsx
+++ b/apps/app/src/components/PageControls/PageControls.tsx
@@ -57,7 +57,7 @@ const Tags = (props: TagsProps): JSX.Element => {
         className="btn btn-sm btn-outline-neutral-secondary"
         onClick={onClickEditTagsButton}
       >
-        <span className="material-symbols-outlined me-1">local_offer</span>
+        <span className="material-symbols-outlined me-sm-1">local_offer</span>
         <span className="d-none d-sm-inline">Tags</span>
       </button>
     </div>
diff --git a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
index f2df5238550..2987657894b 100644
--- a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
+++ b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
@@ -1,3 +1,8 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 .editor-navbar :global {
   min-height: 72px;
+  @include bs.media-breakpoint-down(md) {
+    min-height: 96px;
+  }
 }
diff --git a/apps/app/src/components/PageHeader/PageHeader.tsx b/apps/app/src/components/PageHeader/PageHeader.tsx
index d12b70cc0a6..c8c61a0538a 100644
--- a/apps/app/src/components/PageHeader/PageHeader.tsx
+++ b/apps/app/src/components/PageHeader/PageHeader.tsx
@@ -21,7 +21,7 @@ export const PageHeader: FC = () => {
       <PagePathHeader
         currentPage={currentPage}
       />
-      <div className="mt-1">
+      <div className="mt-0 mt-md-1">
         <PageTitleHeader
           currentPage={currentPage}
         />
diff --git a/apps/app/src/components/PageHeader/PagePathHeader.module.scss b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
index b52c3d7b1e7..844aeb5f7d4 100644
--- a/apps/app/src/components/PageHeader/PagePathHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
@@ -1,5 +1,13 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 .page-path-header :global {
   max-width: calc(100vw - 650px);
+  @include bs.media-breakpoint-down(lg) {
+    max-width: calc(100vw - 372px);
+  }
+  @include bs.media-breakpoint-down(md) {
+    max-width: calc(100vw - 264px);
+  }
   input {
     min-width: 20px;
     min-height: unset;
diff --git a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
index 8214c3cd493..dd5b9109f7a 100644
--- a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
@@ -1,5 +1,13 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 .page-title-header :global {
   max-width: calc(100vw - 650px);
+  @include bs.media-breakpoint-down(lg) {
+    max-width: calc(100vw - 372px);
+  }
+  @include bs.media-breakpoint-down(md) {
+    max-width: calc(100vw - 264px);
+  }
   input {
     min-width: 20px;
     min-height: unset;

From 978287e8907c7da98f2a6eb876388040ab0eaae7 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Wed, 24 Apr 2024 17:45:53 +0900
Subject: [PATCH 5/9] Adjust responsive in editor

---
 .../components/PageEditor/EditorNavbar/EditingUserList.tsx | 4 ++--
 .../PageEditor/EditorNavbar/EditorNavbar.module.scss       | 2 +-
 .../components/PageEditor/EditorNavbar/EditorNavbar.tsx    | 7 ++++---
 .../src/components/PageHeader/PagePathHeader.module.scss   | 3 +++
 .../src/components/PageHeader/PageTitleHeader.module.scss  | 3 +++
 apps/app/src/components/PageHeader/PageTitleHeader.tsx     | 2 +-
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/PageEditor/EditorNavbar/EditingUserList.tsx b/apps/app/src/components/PageEditor/EditorNavbar/EditingUserList.tsx
index dd848e38dd1..c5bc6e6822d 100644
--- a/apps/app/src/components/PageEditor/EditorNavbar/EditingUserList.tsx
+++ b/apps/app/src/components/PageEditor/EditorNavbar/EditingUserList.tsx
@@ -27,8 +27,8 @@ export const EditingUserList: FC<Props> = ({ userList }) => {
   }
 
   return (
-    <div className="d-flex flex-column justify-content-end">
-      <div className="d-flex justify-content-end">
+    <div className="d-flex flex-column justify-content-start justify-content-sm-end">
+      <div className="d-flex justify-content-start justify-content-sm-end">
         {firstFourUsers.map(user => (
           <div className="ms-1">
             <UserPicture
diff --git a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
index 2987657894b..3fced4376c2 100644
--- a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
+++ b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss
@@ -2,7 +2,7 @@
 
 .editor-navbar :global {
   min-height: 72px;
-  @include bs.media-breakpoint-down(md) {
+  @include bs.media-breakpoint-down(sm) {
     min-height: 96px;
   }
 }
diff --git a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
index 078685bb4ef..3e3678a1ca0 100644
--- a/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
+++ b/apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.tsx
@@ -12,11 +12,12 @@ export const EditorNavbar = (): JSX.Element => {
   const { data: editingUsers } = useEditingUsers();
 
   return (
-    <div className={`${moduleClass} d-flex justify-content-between ps-3 ps-md-5 ps-xl-4 pe-4 py-1`}>
-      <PageHeader />
-      <EditingUserList
+    <div className={`${moduleClass} d-flex flex-column flex-sm-row justify-content-between ps-3 ps-md-5 ps-xl-4 pe-4 py-1 align-items-sm-end`}>
+      <div className="order-2 order-sm-1"><PageHeader /></div>
+      <div className="order-1 order-sm-2"><EditingUserList
         userList={editingUsers?.userList ?? []}
       />
+      </div>
     </div>
   );
 };
diff --git a/apps/app/src/components/PageHeader/PagePathHeader.module.scss b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
index 844aeb5f7d4..b6c1ee9c779 100644
--- a/apps/app/src/components/PageHeader/PagePathHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
@@ -8,6 +8,9 @@
   @include bs.media-breakpoint-down(md) {
     max-width: calc(100vw - 264px);
   }
+  @include bs.media-breakpoint-down(sm) {
+    max-width: calc(100vw - 48px);
+  }
   input {
     min-width: 20px;
     min-height: unset;
diff --git a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
index dd5b9109f7a..fa756711178 100644
--- a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
@@ -8,6 +8,9 @@
   @include bs.media-breakpoint-down(md) {
     max-width: calc(100vw - 264px);
   }
+  @include bs.media-breakpoint-down(sm) {
+    max-width: calc(100vw - 48px);
+  }
   input {
     min-width: 20px;
     min-height: unset;
diff --git a/apps/app/src/components/PageHeader/PageTitleHeader.tsx b/apps/app/src/components/PageHeader/PageTitleHeader.tsx
index ea947243f1c..5959dcc5f25 100644
--- a/apps/app/src/components/PageHeader/PageTitleHeader.tsx
+++ b/apps/app/src/components/PageHeader/PageTitleHeader.tsx
@@ -108,7 +108,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
           </div>
         ) }
         <h1
-          className={`mb-0 px-2 fs-4
+          className={`mb-0 mb-sm-1 px-2 fs-4
             ${isRenameInputShown ? 'invisible' : ''} text-truncate
             ${isMovable ? 'border border-2 rounded-2' : ''} ${borderColorClass}
           `}

From f20db7592d06bfcf75b5a6dc96d6d233ce16d49b Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Thu, 25 Apr 2024 21:19:20 +0900
Subject: [PATCH 6/9] Replace margin element

---
 apps/app/src/components/PageControls/PageControls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/PageControls/PageControls.tsx b/apps/app/src/components/PageControls/PageControls.tsx
index 6d0a06dda54..30f190aee29 100644
--- a/apps/app/src/components/PageControls/PageControls.tsx
+++ b/apps/app/src/components/PageControls/PageControls.tsx
@@ -58,8 +58,8 @@ const Tags = (props: TagsProps): JSX.Element => {
         className="btn btn-sm btn-outline-neutral-secondary"
         onClick={onClickEditTagsButton}
       >
-        <span className="material-symbols-outlined me-sm-1">local_offer</span>
-        <span className="d-none d-sm-inline">{t('Tags')}</span>
+        <span className="material-symbols-outlined">local_offer</span>
+        <span className="d-none d-sm-inline ms-1">{t('Tags')}</span>
       </button>
     </div>
   );

From 1a79b4b22b8b4153a413e692ce42845c67b4fde3 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Thu, 25 Apr 2024 21:29:45 +0900
Subject: [PATCH 7/9] Simplify code

---
 apps/app/src/components/PageControls/PageControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/PageControls/PageControls.tsx b/apps/app/src/components/PageControls/PageControls.tsx
index 30f190aee29..78033dc684f 100644
--- a/apps/app/src/components/PageControls/PageControls.tsx
+++ b/apps/app/src/components/PageControls/PageControls.tsx
@@ -285,7 +285,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
       )}
 
       { !hideSubControls && (
-        <div className={`hstack gap-1 ${isViewMode && editorMode === EditorMode.View ? '' : 'd-none d-lg-flex'}`}>
+        <div className={`hstack gap-1 ${!isViewMode && 'd-none d-lg-flex'}`}>
           {revisionId != null && _isIPageInfoForOperation && (
             <SubscribeButton
               status={pageInfo.subscriptionStatus}

From 62620e5ca867cf51985a58008f0a1ddc235b9846 Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Thu, 25 Apr 2024 21:35:34 +0900
Subject: [PATCH 8/9] Undo changes

---
 .../components/PageHeader/PagePathHeader.module.scss | 12 +-----------
 .../PageHeader/PageTitleHeader.module.scss           | 12 +-----------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/apps/app/src/components/PageHeader/PagePathHeader.module.scss b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
index b6c1ee9c779..475757400eb 100644
--- a/apps/app/src/components/PageHeader/PagePathHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
@@ -1,16 +1,6 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
 .page-path-header :global {
   max-width: calc(100vw - 650px);
-  @include bs.media-breakpoint-down(lg) {
-    max-width: calc(100vw - 372px);
-  }
-  @include bs.media-breakpoint-down(md) {
-    max-width: calc(100vw - 264px);
-  }
-  @include bs.media-breakpoint-down(sm) {
-    max-width: calc(100vw - 48px);
-  }
+
   input {
     min-width: 20px;
     min-height: unset;
diff --git a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
index fa756711178..44f1d8ca74c 100644
--- a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
@@ -1,16 +1,6 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
 .page-title-header :global {
   max-width: calc(100vw - 650px);
-  @include bs.media-breakpoint-down(lg) {
-    max-width: calc(100vw - 372px);
-  }
-  @include bs.media-breakpoint-down(md) {
-    max-width: calc(100vw - 264px);
-  }
-  @include bs.media-breakpoint-down(sm) {
-    max-width: calc(100vw - 48px);
-  }
+
   input {
     min-width: 20px;
     min-height: unset;

From b950410ff1b25d3da5afcd491937042a14ac9e2c Mon Sep 17 00:00:00 2001
From: satof3 <satof.design@gmail.com>
Date: Thu, 25 Apr 2024 21:38:58 +0900
Subject: [PATCH 9/9] Remove blank line

---
 apps/app/src/components/PageHeader/PagePathHeader.module.scss  | 1 -
 apps/app/src/components/PageHeader/PageTitleHeader.module.scss | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/app/src/components/PageHeader/PagePathHeader.module.scss b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
index 475757400eb..b52c3d7b1e7 100644
--- a/apps/app/src/components/PageHeader/PagePathHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PagePathHeader.module.scss
@@ -1,6 +1,5 @@
 .page-path-header :global {
   max-width: calc(100vw - 650px);
-
   input {
     min-width: 20px;
     min-height: unset;
diff --git a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
index 44f1d8ca74c..8214c3cd493 100644
--- a/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
+++ b/apps/app/src/components/PageHeader/PageTitleHeader.module.scss
@@ -1,6 +1,5 @@
 .page-title-header :global {
   max-width: calc(100vw - 650px);
-
   input {
     min-width: 20px;
     min-height: unset;