Adjust responsive in editor

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

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

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

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;

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;

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