Pass useAutosizeInput

apps/app/src/components/Common/ClosableTextInput.tsx

@@ -13,7 +13,7 @@ type ClosableTextInputProps = {
   value?: string
   placeholder?: string
   validationTarget?: string,
-  useAutosize?: boolean
+  useAutosizeInput?: boolean
   onPressEnter?(inputText: string | null): void
   onPressEscape?: () => void
   onClickOutside?(): void
@@ -134,7 +134,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
 
   return (
     <div>
-      { props.useAutosize
+      { props.useAutosizeInput
         ? <AutosizeInput {...inputProps} />
         : <input className="form-control" {...inputProps} />
       }

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

@@ -95,14 +95,17 @@ export const PagePathHeader: FC<Props> = (props) => {
       >
         {isRenameInputShown
           ? (
-            <ClosableTextInput
-              value={editedPagePath}
-              placeholder={t('Input page name')}
-              onPressEnter={onPressEnter}
-              onPressEscape={onPressEscape}
-              validationTarget={ValidationTarget.PAGE}
-              handleInputChange={onInputChange}
-            />
+            <div className="page-path-header-input me-2">
+              <ClosableTextInput
+                useAutosizeInput
+                value={editedPagePath}
+                placeholder={t('Input page name')}
+                onPressEnter={onPressEnter}
+                onPressEscape={onPressEscape}
+                handleInputChange={onInputChange}
+                validationTarget={ValidationTarget.PAGE}
+              />
+            </div>
           )
           : (
             <div className="me-2">
@@ -131,9 +134,9 @@ export const PagePathHeader: FC<Props> = (props) => {
       </div>
 
       {isOpened
-          && (
-            <PageSelectModal />
-          )}
+        && (
+          <PageSelectModal />
+        )}
     </div>
   );
 };

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

@@ -61,27 +61,25 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
 
   return (
-    <div className="row">
-      <div className="col-4">
-        {isRenameInputShown
-          ? (
-            <div className="flex-fill">
-              <ClosableTextInput
-                value={editedPageTitle}
-                placeholder={t('Input page name')}
-                onPressEnter={onPressEnter}
-                onPressEscape={onPressEscape}
-                validationTarget={ValidationTarget.PAGE}
-                handleInputChange={onInputChange}
-              />
-            </div>
-          )
-          : (
-            <h2 onClick={onClickPageTitle}>
-              {pageTitle}
-            </h2>
-          )}
-      </div>
-    </div>
+    <>
+      {isRenameInputShown
+        ? (
+          <div className="page-title-header-input">
+            <ClosableTextInput
+              useAutosizeInput
+              value={editedPageTitle}
+              onPressEnter={onPressEnter}
+              onPressEscape={onPressEscape}
+              handleInputChange={onInputChange}
+              validationTarget={ValidationTarget.PAGE}
+            />
+          </div>
+        )
+        : (
+          <h2 onClick={onClickPageTitle}>
+            {pageTitle}
+          </h2>
+        )}
+    </>
   );
 };