adjust spacing

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 ms-3`}>
+    <div className={`${moduleClass} d-flex justify-content-between px-4 py-1`}>
       <PageHeader />
       <EditingUserList
         userList={editingUsers?.userList ?? []}

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -21,9 +21,8 @@ export const PageHeader: FC = () => {
       <PagePathHeader
         currentPage={currentPage}
       />
-      <div className="row mt-1">
+      <div className="mt-1">
         <PageTitleHeader
-          className="col"
           currentPage={currentPage}
         />
       </div>

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -23,12 +23,13 @@ const moduleClass = styles['page-path-header'];
 
 
 type Props = {
-  currentPage: IPagePopulatedToShowRevision
+  currentPage: IPagePopulatedToShowRevision,
+  className?: string,
 }
 
 export const PagePathHeader: FC<Props> = memo((props: Props) => {
   const { t } = useTranslation();
-  const { currentPage } = props;
+  const { currentPage, className } = props;
 
   const dPagePath = new DevidedPagePath(currentPage.path, true);
   const parentPagePath = dPagePath.former;
@@ -102,7 +103,7 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
   return (
     <div
       id="page-path-header"
-      className={`d-flex ${moduleClass} small position-relative`}
+      className={`d-flex ${moduleClass} ${className ?? ''} small position-relative ms-2`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >

apps/app/src/components/PageHeader/PageTitleHeader.module.scss

@@ -5,7 +5,7 @@
     min-height: unset;
     padding: 0 0.5rem;
     line-height: 1em;
-    transform: translateX(-0.45rem) translateY(0.05rem);
+    transform: translateX(0.05rem) translateY(0.05rem);
   }
 }
 

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -95,7 +95,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
           </div>
         ) }
         <h1
-          className={`mb-0 fs-4
+          className={`mb-0 px-2 fs-4
             ${isRenameInputShown ? 'invisible' : ''} text-truncate
             ${isMovable ? 'border border-2 rounded-2' : ''} ${borderColorClass}
           `}
@@ -114,7 +114,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
           pageId={currentPage._id}
           pagePath={currentPage.path}
           dropdownToggleId={`copydropdown-${currentPage._id}`}
-          dropdownToggleClassName="ms-2 p-1"
+          dropdownToggleClassName="p-1"
         >
           <span className="material-symbols-outlined fs-6">content_paste</span>
         </CopyDropdown>