Fixed style

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

@@ -112,7 +112,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
 
 
   return (
-    <div className="d-block flex-fill">
+    <div>
       <input
         value={inputText || ''}
         ref={inputRef}

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -99,7 +99,7 @@ const isDroppable = (fromPage?: Partial<IPageHasId>, newParentPage?: Partial<IPa
 type NotDraggableProps = {
   children: ReactNode,
 };
-const NotDraggable = (props: NotDraggableProps): JSX.Element => {
+const NotDraggableForClosableTextInput = (props: NotDraggableProps): JSX.Element => {
   return <div draggable onDragStart={e => e.preventDefault()}>{props.children}</div>;
 };
 
@@ -449,15 +449,17 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         </div>
         { isRenameInputShown
           ? (
-            <NotDraggable>
-              <ClosableTextInput
-                value={nodePath.basename(page.path ?? '')}
-                placeholder={t('Input page name')}
-                onClickOutside={() => { setRenameInputShown(false) }}
-                onPressEnter={onPressEnterForRenameHandler}
-                inputValidator={inputValidator}
-              />
-            </NotDraggable>
+            <div className="d-block flex-fill">
+              <NotDraggableForClosableTextInput>
+                <ClosableTextInput
+                  value={nodePath.basename(page.path ?? '')}
+                  placeholder={t('Input page name')}
+                  onClickOutside={() => { setRenameInputShown(false) }}
+                  onPressEnter={onPressEnterForRenameHandler}
+                  inputValidator={inputValidator}
+                />
+              </NotDraggableForClosableTextInput>
+            </div>
           )
           : (
             <>
@@ -513,14 +515,16 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       </li>
 
       {isEnableActions && isNewPageInputShown && (
-        <NotDraggable>
-          <ClosableTextInput
-            placeholder={t('Input page name')}
-            onClickOutside={() => { setNewPageInputShown(false) }}
-            onPressEnter={onPressEnterForCreateHandler}
-            inputValidator={inputValidator}
-          />
-        </NotDraggable>
+        <div className="d-block flex-fill">
+          <NotDraggableForClosableTextInput>
+            <ClosableTextInput
+              placeholder={t('Input page name')}
+              onClickOutside={() => { setNewPageInputShown(false) }}
+              onPressEnter={onPressEnterForCreateHandler}
+              inputValidator={inputValidator}
+            />
+          </NotDraggableForClosableTextInput>
+        </div>
       )}
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (