adjust positions

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

@@ -1,14 +1,2 @@
 .page-header :global {
-  .page-title-header-input {
-    input {
-      font-size: 2rem;
-    }
-  }
-
-  .page-path-header-buttons {
-    button {
-      width: 25px;
-      height: 20px;
-    }
-  }
 }

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

@@ -7,6 +7,7 @@ import { PageTitleHeader } from './PageTitleHeader';
 
 import styles from './PageHeader.module.scss';
 
+const moduleClass = styles['page-header'] ?? '';
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
@@ -16,11 +17,12 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <div className={`${styles['page-header']}`}>
+    <div className={moduleClass}>
       <PagePathHeader
         currentPage={currentPage}
       />
       <PageTitleHeader
+        className="mt-2"
         currentPage={currentPage}
       />
     </div>

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

@@ -1,5 +1,19 @@
 .page-path-header :global {
   input {
     min-width: 20px;
+    min-height: unset;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 1em;
+  }
+
+  .page-path-header-buttons {
+    height: 0;
+
+    .btn {
+      width: 24px;
+      height: 24px;
+      transform: translateY(8px);
+    }
   }
 }

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

@@ -21,7 +21,7 @@ import styles from './PagePathHeader.module.scss';
 const moduleClass = styles['page-path-header'];
 
 
-export type Props = {
+type Props = {
   currentPage: IPagePopulatedToShowRevision
 }
 
@@ -102,13 +102,13 @@ export const PagePathHeader: FC<Props> = (props) => {
   return (
     <div
       id="page-path-header"
-      className={`d-flex ${moduleClass}`}
+      className={`d-flex ${moduleClass} small`}
       onMouseEnter={() => setButtonShown(true)}
       onMouseLeave={() => setButtonShown(false)}
     >
       <div className="me-2">
-        {isRenameInputShown
-          ? (
+        { isRenameInputShown && (
+          <div className="position-absolute">
             <ClosableTextInput
               useAutosizeInput
               value={editingParentPagePath}
@@ -119,28 +119,28 @@ export const PagePathHeader: FC<Props> = (props) => {
               onChange={onInputChange}
               validationTarget={ValidationTarget.PAGE}
             />
-          )
-          : (
-            <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
-          )
-        }
+          </div>
+        ) }
+        <div className={`${isRenameInputShown ? 'invisible' : ''}`}>
+          <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
+        </div>
       </div>
 
       <div className={`page-path-header-buttons d-flex align-items-center ${isButtonsShown ? '' : 'd-none'}`}>
         <button
           type="button"
-          className="btn btn-sm text-muted border border-secondary me-2 d-flex align-items-center justify-content-center"
+          className="btn btn-outline-neutral-secondary me-2 d-flex align-items-center justify-content-center"
           onClick={onClickEditButton}
         >
-          <span className="material-symbols-outlined fs-5 mt-1">{isRenameInputShown ? 'check_circle' : 'edit'}</span>
+          <span className="material-symbols-outlined fs-6">{isRenameInputShown ? 'check_circle' : 'edit'}</span>
         </button>
 
         <button
           type="button"
-          className="btn btn-sm text-muted border border-secondary d-flex align-items-center justify-content-center"
+          className="btn btn-outline-neutral-secondary d-flex align-items-center justify-content-center"
           onClick={openPageSelectModal}
         >
-          <span className="material-symbols-outlined fs-5 mt-1">account_tree</span>
+          <span className="material-symbols-outlined fs-6">account_tree</span>
         </button>
       </div>
 

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

@@ -0,0 +1,9 @@
+.page-title-header :global {
+  input {
+    min-width: 20px;
+    min-height: unset;
+    padding: 0 0.5rem;
+    line-height: 1em;
+    transform: translateX(-0.55rem) translateY(-0.05rem);
+  }
+}

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

@@ -3,6 +3,7 @@ import { useState, useCallback } from 'react';
 
 import nodePath from 'path';
 
+import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { pathUtils } from '@growi/core/dist/utils';
 import { useTranslation } from 'next-i18next';
@@ -12,9 +13,16 @@ import { ValidationTarget } from '~/client/util/input-validator';
 import ClosableTextInput from '../Common/ClosableTextInput';
 import { CopyDropdown } from '../Common/CopyDropdown';
 
-import type { Props } from './PagePathHeader';
 import { usePagePathRenameHandler } from './page-header-utils';
 
+import styles from './PageTitleHeader.module.scss';
+
+const moduleClass = styles['page-title-header'];
+
+type Props = {
+  currentPage: IPagePopulatedToShowRevision,
+  className?: string,
+};
 
 export const PageTitleHeader: FC<Props> = (props) => {
   const { t } = useTranslation();
@@ -63,38 +71,38 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
 
   return (
-    <div className="d-flex align-items-center">
+    <div className={`d-flex align-items-center ${moduleClass} ${props.className ?? ''}`}>
       <div className="me-1">
-        {isRenameInputShown
-          ? (
-            <div className="page-title-header-input">
-              <ClosableTextInput
-                useAutosizeInput
-                value={editedPageTitle}
-                placeholder={t('Input page name')}
-                onPressEnter={onPressEnter}
-                onPressEscape={onPressEscape}
-                onChange={onInputChange}
-                onClickOutside={() => setRenameInputShown(false)}
-                validationTarget={ValidationTarget.PAGE}
-              />
-            </div>
-          )
-          : (
-            <h1 className="mb-0 fs-4" onClick={onClickPageTitle}>
-              {pageTitle}
-            </h1>
-          )}
+        { isRenameInputShown && (
+          <div className="position-absolute">
+            <ClosableTextInput
+              useAutosizeInput
+              value={editedPageTitle}
+              placeholder={t('Input page name')}
+              inputClassName="fs-4"
+              onPressEnter={onPressEnter}
+              onPressEscape={onPressEscape}
+              onChange={onInputChange}
+              onClickOutside={() => setRenameInputShown(false)}
+              validationTarget={ValidationTarget.PAGE}
+            />
+          </div>
+        ) }
+        <h1 className={`mb-0 fs-4 ${isRenameInputShown ? 'invisible' : ''}`} onClick={onClickPageTitle}>
+          {pageTitle}
+        </h1>
       </div>
 
-      <CopyDropdown
-        pageId={currentPage._id}
-        pagePath={currentPage.path}
-        dropdownToggleId={`copydropdown-${currentPage._id}`}
-        dropdownToggleClassName="ms-2 p-1"
-      >
-        <span className="material-symbols-outlined fs-6">content_paste</span>
-      </CopyDropdown>
+      <div className={`${isRenameInputShown ? 'invisible' : ''}`}>
+        <CopyDropdown
+          pageId={currentPage._id}
+          pagePath={currentPage.path}
+          dropdownToggleId={`copydropdown-${currentPage._id}`}
+          dropdownToggleClassName="ms-2 p-1"
+        >
+          <span className="material-symbols-outlined fs-6">content_paste</span>
+        </CopyDropdown>
+      </div>
     </div>
   );
 };