From 6676debfa9959b7e1e9fa9103a9b00805be43c6a Mon Sep 17 00:00:00 2001
From: Alex <alex0394@hotmail.com>
Date: Fri, 25 Mar 2022 16:35:09 -0400
Subject: [PATCH] fixed width CSS + hooks and function order

---
 .../src/components/field-input/text-field-input.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
index 1ec93083..98bf3d3d 100644
--- a/packages/react-app/src/components/field-input/text-field-input.tsx
+++ b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -22,7 +22,7 @@ const MaxLineStyled = styled.div`
 `;
 
 const BlockStyled = styled.div`
-  width: 100%;
+  ${({ wide }: any) => wide && 'width: 100%;'}
 `;
 
 // #endregion
@@ -69,14 +69,14 @@ export default function TextFieldInput({
 }: Props) {
   const [isEditState, setIsEdit] = useState(isEdit);
 
-  const handlePreview = () => {
-    setIsEdit(!isEditState);
-  };
-
   useEffect(() => {
     setIsEdit(isEdit);
   }, [isEdit]);
 
+  const handlePreview = () => {
+    setIsEdit(!isEditState);
+  };
+
   const readOnlyContent = (
     <>
       {isMarkDown ? (
@@ -129,7 +129,7 @@ export default function TextFieldInput({
     </>
   );
   const loadableContent = isEditState ? (
-    <BlockStyled>
+    <BlockStyled wide={wide}>
       <TextInput
         id={id}
         value={value ?? ''}