Adjust pagetitle and pagepath appearance when moblie editor

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>

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;
+  }
 }

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}
         />

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;

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;