maintain height

Author: meganrm

src/components/ExpandableText/index.tsx

@@ -30,12 +30,16 @@ const ExpandableText = ({ text, setCurrentHeight }: ExpandableTextProps) => {
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
     const ref = useRef<HTMLParagraphElement>(null);
 
+    useEffect(() => {
+        setIsExpanded(false);
+    }, [text]);
+
     useEffect(() => {
         setCurrentHeight(
             (ref.current?.clientHeight || DEFAULT_DESCRIPTION_HEIGHT) +
                 TEXT_BOTTOM_MARGIN
         );
-    }, [isExpanded, setCurrentHeight]);
+    }, [isExpanded, setCurrentHeight, text]);
     return (
         <Paragraph
             ref={ref}

src/components/PackingInput/index.tsx

@@ -43,20 +43,15 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const storeStartPacking = useStartPacking();
     const siderHeight = useSiderHeight();
 
-    const [availableRecipeHeight, setAvailableRecipeHeight] = useState<number>(
-        siderHeight -
-            DEFAULT_DESCRIPTION_HEIGHT -
-            SELECT_HEIGHT -
-            TEXT_BOTTOM_MARGIN
-    );
     const [descriptionHeight, setDescriptionHeight] = useState<number>(
-        DEFAULT_DESCRIPTION_HEIGHT
+        DEFAULT_DESCRIPTION_HEIGHT + TEXT_BOTTOM_MARGIN
+    );
+    const [availableRecipeHeight, setAvailableRecipeHeight] = useState<number>(
+        siderHeight - descriptionHeight - SELECT_HEIGHT
     );
 
     const getAvailableHeight = useCallback(() => {
-        return (
-            siderHeight - descriptionHeight - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN
-        );
+        return siderHeight - descriptionHeight - SELECT_HEIGHT;
     }, [siderHeight, descriptionHeight]);
 
     useEffect(() => {

src/components/RecipeForm/index.tsx

@@ -49,6 +49,7 @@ const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => {
                 >
                     <Button
                         onClick={onStartPacking}
+                        className="packing-button"
                         color="primary"
                         variant="filled"
                         disabled={isPacking || isOriginalRecipe}

src/components/RecipeForm/style.css

@@ -3,3 +3,7 @@
     flex-direction: column;
     justify-content: space-between;
 }
+
+.packing-button {
+    margin-bottom: 20px;
+}

src/hooks/useSiderHeight.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 const HEADER_HEIGHT = 48;
-const FOOTER_HEIGHT = 64;
+const FOOTER_HEIGHT = 51;
 
 export function useSiderHeight() {
     const [siderHeight, setSiderHeight] = useState<number>(