fix element styles

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

@@ -16,7 +16,7 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <nav className={`${styles['page-header']} `}>
+    <nav className={`${styles['page-header']}`}>
       <PagePathHeader
         currentPage={currentPage}
       />

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

@@ -87,50 +87,47 @@ export const PagePathHeader: FC<Props> = (props) => {
   return (
     <div
       id="page-path-header"
+      className="d-flex align-items-center"
       onMouseLeave={() => setButtonShown(false)}
+      onMouseEnter={() => setButtonShown(true)}
     >
-      <div
-        className="d-flex align-items-center"
-        onMouseEnter={() => setButtonShown(true)}
-      >
-        {isRenameInputShown
-          ? (
-            <div className="page-path-header-input me-2">
-              <ClosableTextInput
-                useAutosizeInput
-                value={editedPagePath}
-                placeholder={t('Input page name')}
-                onPressEnter={onPressEnter}
-                onPressEscape={onPressEscape}
-                onChange={onInputChange}
-                validationTarget={ValidationTarget.PAGE}
-              />
-            </div>
-          )
-          : (
-            <div className="me-2">
-              <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
-            </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"
-            onClick={onClickEditButton}
-          >
-            <span className="material-symbols-outlined fs-5 mt-1">{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"
-            onClick={openPageSelectModal}
-          >
-            <span className="material-symbols-outlined fs-5 mt-1">account_tree</span>
-          </button>
-        </div>
+      {isRenameInputShown
+        ? (
+          <div className="page-path-header-input me-2">
+            <ClosableTextInput
+              useAutosizeInput
+              value={editedPagePath}
+              placeholder={t('Input page name')}
+              onPressEnter={onPressEnter}
+              onPressEscape={onPressEscape}
+              onChange={onInputChange}
+              validationTarget={ValidationTarget.PAGE}
+            />
+          </div>
+        )
+        : (
+          <div className="me-2">
+            <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
+          </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"
+          onClick={onClickEditButton}
+        >
+          <span className="material-symbols-outlined fs-5 mt-1">{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"
+          onClick={openPageSelectModal}
+        >
+          <span className="material-symbols-outlined fs-5 mt-1">account_tree</span>
+        </button>
       </div>
 
       {isOpened

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

@@ -61,7 +61,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
 
   return (
-    <>
+    <div className="d-flex">
       {isRenameInputShown
         ? (
           <div className="page-title-header-input">
@@ -81,6 +81,6 @@ export const PageTitleHeader: FC<Props> = (props) => {
             {pageTitle}
           </h2>
         )}
-    </>
+    </div>
   );
 };