From cf7a7b7d57883e4aff4e05da36b4c1a0591ea0b4 Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 14 Nov 2025 15:48:17 -0800 Subject: [PATCH 01/20] adjusting height correctly --- src/App.css | 4 +- src/App.tsx | 10 +++- .../index.tsx | 6 ++- .../style.css | 0 src/components/PackingInput/index.tsx | 47 +++++++++++++++++-- src/components/PackingInput/style.css | 4 -- src/components/RecipeForm/index.tsx | 5 +- src/components/RecipeForm/style.css | 4 +- src/hooks/useSiderHeight.tsx | 21 +++++++++ 9 files changed, 83 insertions(+), 18 deletions(-) rename src/components/{ExpandableDescription => ExpandableText}/index.tsx (80%) rename src/components/{ExpandableDescription => ExpandableText}/style.css (100%) create mode 100644 src/hooks/useSiderHeight.tsx diff --git a/src/App.css b/src/App.css index cc8198ce..876bb87e 100644 --- a/src/App.css +++ b/src/App.css @@ -21,9 +21,9 @@ } .sider { - height: calc( + /*height: calc( 100vh - var(--header-height) - var(--footer-height) - ); /* full height minus header and footer */ + ); full height minus header and footer */ overflow-x: hidden; overflow-y: auto; padding: 0 40px; diff --git a/src/App.tsx b/src/App.tsx index 235cae3c..dd5c949e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,12 +19,14 @@ import Viewer from "./components/Viewer"; import StatusBar from "./components/StatusBar"; import "./App.css"; +import { useSiderHeight } from "./hooks/useSiderHeight"; const { Header, Content, Sider, Footer } = Layout; const { Link } = Typography; function App() { const [jobStatus, setJobStatus] = useState(""); + const setJobLogs = useSetJobLogs(); const jobLogs = useJobLogs(); const setJobId = useSetJobId(); @@ -32,6 +34,7 @@ function App() { const setPackingResults = useSetPackingResults(); const runTime = useRunTime(); const outputDir = useOutputsDirectory(); + const siderHeight = useSiderHeight(); let start = 0; @@ -170,7 +173,12 @@ function App() { - + diff --git a/src/components/ExpandableDescription/index.tsx b/src/components/ExpandableText/index.tsx similarity index 80% rename from src/components/ExpandableDescription/index.tsx rename to src/components/ExpandableText/index.tsx index 3fe2cab0..e0c332a3 100644 --- a/src/components/ExpandableDescription/index.tsx +++ b/src/components/ExpandableText/index.tsx @@ -6,6 +6,7 @@ const { Paragraph } = Typography; interface ExpandableTextProps { text: string; + onExpand: () => void; } const expandSymbol = ( @@ -20,10 +21,11 @@ const collapseSymbol = ( ); -export const ExpandableText = ({ text }: ExpandableTextProps) => { +const ExpandableText = ({ text, onExpand }: ExpandableTextProps) => { return ( @@ -34,4 +36,4 @@ export const ExpandableText = ({ text }: ExpandableTextProps) => { ); }; -export default ExpandableText; \ No newline at end of file +export default ExpandableText; diff --git a/src/components/ExpandableDescription/style.css b/src/components/ExpandableText/style.css similarity index 100% rename from src/components/ExpandableDescription/style.css rename to src/components/ExpandableText/style.css diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx index eb68e2ec..fbd32dee 100644 --- a/src/components/PackingInput/index.tsx +++ b/src/components/PackingInput/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { Tabs } from "antd"; import { @@ -13,8 +13,9 @@ import { import Dropdown from "../Dropdown"; import JSONViewer from "../JSONViewer"; import RecipeForm from "../RecipeForm"; -import { ExpandableText } from "../ExpandableDescription"; +import ExpandableText from "../ExpandableText"; import "./style.css"; +import { useSiderHeight } from "../../hooks/useSiderHeight"; interface PackingInputProps { startPacking: ( @@ -24,6 +25,9 @@ interface PackingInputProps { ) => Promise; } +const DEFAULT_DESCRIPTION_HEIGHT = 58; +const SELECT_HEIGHT = 52; + const PackingInput = (props: PackingInputProps): JSX.Element => { const { startPacking } = props; const selectedRecipeId = useSelectedRecipeId(); @@ -34,6 +38,19 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { const loadAllRecipes = useLoadAllRecipes(); const selectRecipe = useSelectRecipe(); const storeStartPacking = useStartPacking(); + const siderHeight = useSiderHeight(); + + const recipeDescription = useRef(null); + const [tabsHeight, setTabsHeight] = useState(); + + useEffect(() => { + setTabsHeight( + siderHeight - + (recipeDescription.current?.offsetHeight || + DEFAULT_DESCRIPTION_HEIGHT) - + SELECT_HEIGHT + ); + }, [setTabsHeight, siderHeight]); const preFetchInputsAndRecipes = useCallback(async () => { await loadInputOptions(); @@ -56,6 +73,11 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { return loadingText; } + const onExpandCollapse = () => { + console.log("expanded:", recipeDescription.current?.offsetHeight); + setTabsHeight(recipeDescription.current?.offsetHeight); + }; + return ( <>
@@ -73,11 +95,26 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { ) : ( <> {recipeObj.description && ( - +
+ +
)} - + - + diff --git a/src/components/PackingInput/style.css b/src/components/PackingInput/style.css index a90c791f..686eed8c 100644 --- a/src/components/PackingInput/style.css +++ b/src/components/PackingInput/style.css @@ -5,7 +5,3 @@ align-items: center; height: var(--recipe-select-height); } - -.recipe-content { - height: calc(100% - var(--recipe-select-height)); -} diff --git a/src/components/RecipeForm/index.tsx b/src/components/RecipeForm/index.tsx index 3ac7bb04..e504b721 100644 --- a/src/components/RecipeForm/index.tsx +++ b/src/components/RecipeForm/index.tsx @@ -10,16 +10,17 @@ import { interface RecipeFormProps { onStartPacking: () => Promise; + availableHeight: number; } -const RecipeForm = ({ onStartPacking }: RecipeFormProps) => { +const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => { const recipeId = useSelectedRecipeId(); const fieldsToDisplay = useFieldsToDisplay(); const isPacking = useIsPacking(); const isOriginalRecipe = useIsOriginalRecipe(); return ( -
+
{fieldsToDisplay && (
{fieldsToDisplay.map((field) => ( diff --git a/src/components/RecipeForm/style.css b/src/components/RecipeForm/style.css index 603f9ee8..3b8137ab 100644 --- a/src/components/RecipeForm/style.css +++ b/src/components/RecipeForm/style.css @@ -2,8 +2,8 @@ display: flex; flex-direction: column; justify-content: space-between; - height: calc( + /* height: calc( 100vh - var(--header-height) - var(--recipe-select-height) - var(--tab-height) - var(--footer-height) - ); + ); */ } diff --git a/src/hooks/useSiderHeight.tsx b/src/hooks/useSiderHeight.tsx new file mode 100644 index 00000000..2074e002 --- /dev/null +++ b/src/hooks/useSiderHeight.tsx @@ -0,0 +1,21 @@ +import { useState, useEffect } from "react"; +const HEADER_HEIGHT = 48; +const FOOTER_HEIGHT = 64; + +export function useSiderHeight() { + const [siderHeight, setSiderHeight] = useState( + window.innerHeight - HEADER_HEIGHT - FOOTER_HEIGHT + ); + + useEffect(() => { + function handleResize() { + setSiderHeight(window.innerHeight - HEADER_HEIGHT - FOOTER_HEIGHT); + } + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + return siderHeight; +} From 459b2daece1c32c806218cd49c37b9713f673816 Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 14 Nov 2025 16:37:32 -0800 Subject: [PATCH 02/20] button stays in the same spot --- src/components/ExpandableText/index.tsx | 24 ++++++++++-- src/components/PackingInput/index.tsx | 49 +++++++++++++------------ src/components/RecipeForm/index.tsx | 2 +- src/constants.ts | 4 ++ 4 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 src/constants.ts diff --git a/src/components/ExpandableText/index.tsx b/src/components/ExpandableText/index.tsx index e0c332a3..72a17c4b 100644 --- a/src/components/ExpandableText/index.tsx +++ b/src/components/ExpandableText/index.tsx @@ -1,12 +1,17 @@ import { Typography } from "antd"; import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons"; import "./style.css"; +import { useEffect, useRef, useState } from "react"; +import { + DEFAULT_DESCRIPTION_HEIGHT, + TEXT_BOTTOM_MARGIN, +} from "../../constants"; const { Paragraph } = Typography; interface ExpandableTextProps { text: string; - onExpand: () => void; + setCurrentHeight: (height: number) => void; } const expandSymbol = ( @@ -21,13 +26,26 @@ const collapseSymbol = ( ); -const ExpandableText = ({ text, onExpand }: ExpandableTextProps) => { +const ExpandableText = ({ text, setCurrentHeight }: ExpandableTextProps) => { + const [isExpanded, setIsExpanded] = useState(false); + const ref = useRef(null); + + useEffect(() => { + setCurrentHeight( + ref.current?.clientHeight || + DEFAULT_DESCRIPTION_HEIGHT + TEXT_BOTTOM_MARGIN + ); + }, [isExpanded, setCurrentHeight]); return ( { + setIsExpanded(info.expanded); + }, + expanded: isExpanded, symbol: (expanded) => expanded ? collapseSymbol : expandSymbol, }} diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx index fbd32dee..4e29c169 100644 --- a/src/components/PackingInput/index.tsx +++ b/src/components/PackingInput/index.tsx @@ -16,6 +16,12 @@ import RecipeForm from "../RecipeForm"; import ExpandableText from "../ExpandableText"; import "./style.css"; import { useSiderHeight } from "../../hooks/useSiderHeight"; +import { + DEFAULT_DESCRIPTION_HEIGHT, + SELECT_HEIGHT, + TABS_HEADER_HEIGHT, + TEXT_BOTTOM_MARGIN, +} from "../../constants"; interface PackingInputProps { startPacking: ( @@ -25,9 +31,6 @@ interface PackingInputProps { ) => Promise; } -const DEFAULT_DESCRIPTION_HEIGHT = 58; -const SELECT_HEIGHT = 52; - const PackingInput = (props: PackingInputProps): JSX.Element => { const { startPacking } = props; const selectedRecipeId = useSelectedRecipeId(); @@ -41,16 +44,23 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { const siderHeight = useSiderHeight(); const recipeDescription = useRef(null); - const [tabsHeight, setTabsHeight] = useState(); + const [availableRecipeHeight, setAvailableRecipeHeight] = useState( + siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT + ); + const [descriptionHeight, setDescriptionHeight] = useState( + DEFAULT_DESCRIPTION_HEIGHT + ); - useEffect(() => { - setTabsHeight( - siderHeight - - (recipeDescription.current?.offsetHeight || - DEFAULT_DESCRIPTION_HEIGHT) - - SELECT_HEIGHT + const getAvailableHeight = useCallback(() => { + return ( + siderHeight - descriptionHeight - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN ); - }, [setTabsHeight, siderHeight]); + }, [siderHeight, descriptionHeight]); + + useEffect(() => { + const newAvailableHeight = getAvailableHeight(); + setAvailableRecipeHeight(newAvailableHeight); + }, [setAvailableRecipeHeight, getAvailableHeight]); const preFetchInputsAndRecipes = useCallback(async () => { await loadInputOptions(); @@ -73,11 +83,6 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { return loadingText; } - const onExpandCollapse = () => { - console.log("expanded:", recipeDescription.current?.offsetHeight); - setTabsHeight(recipeDescription.current?.offsetHeight); - }; - return ( <>
@@ -101,19 +106,17 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { >
)} - + diff --git a/src/components/RecipeForm/index.tsx b/src/components/RecipeForm/index.tsx index e504b721..053b0166 100644 --- a/src/components/RecipeForm/index.tsx +++ b/src/components/RecipeForm/index.tsx @@ -52,7 +52,7 @@ const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => { color="primary" variant="filled" disabled={isPacking || isOriginalRecipe} - style={{ width: "100%" }} + style={{ width: "100%", minHeight: 38 }} > Re-run diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000..2b35059c --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,4 @@ +export const DEFAULT_DESCRIPTION_HEIGHT = 58; +export const TEXT_BOTTOM_MARGIN = 14; +export const SELECT_HEIGHT = 52; +export const TABS_HEADER_HEIGHT = 62; From a938ba5a0c26da96e760b625a9dd741cb32232f7 Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 14 Nov 2025 16:38:36 -0800 Subject: [PATCH 03/20] remove commented out code --- src/App.css | 3 --- src/components/RecipeForm/style.css | 4 ---- 2 files changed, 7 deletions(-) diff --git a/src/App.css b/src/App.css index 876bb87e..7c1580e3 100644 --- a/src/App.css +++ b/src/App.css @@ -21,9 +21,6 @@ } .sider { - /*height: calc( - 100vh - var(--header-height) - var(--footer-height) - ); full height minus header and footer */ overflow-x: hidden; overflow-y: auto; padding: 0 40px; diff --git a/src/components/RecipeForm/style.css b/src/components/RecipeForm/style.css index 3b8137ab..35cc60cc 100644 --- a/src/components/RecipeForm/style.css +++ b/src/components/RecipeForm/style.css @@ -2,8 +2,4 @@ display: flex; flex-direction: column; justify-content: space-between; - /* height: calc( - 100vh - var(--header-height) - var(--recipe-select-height) - - var(--tab-height) - var(--footer-height) - ); */ } From 831093130d0b2cbd9f84217a26b354994cd043ac Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 14 Nov 2025 16:41:24 -0800 Subject: [PATCH 04/20] remove ref --- src/components/PackingInput/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx index 4e29c169..ab9b470c 100644 --- a/src/components/PackingInput/index.tsx +++ b/src/components/PackingInput/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { Tabs } from "antd"; import { @@ -43,7 +43,6 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { const storeStartPacking = useStartPacking(); const siderHeight = useSiderHeight(); - const recipeDescription = useRef(null); const [availableRecipeHeight, setAvailableRecipeHeight] = useState( siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT ); @@ -100,10 +99,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { ) : ( <> {recipeObj.description && ( -
+
Date: Fri, 14 Nov 2025 16:43:00 -0800 Subject: [PATCH 05/20] fix bug --- src/components/ExpandableText/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ExpandableText/index.tsx b/src/components/ExpandableText/index.tsx index 72a17c4b..01bc845b 100644 --- a/src/components/ExpandableText/index.tsx +++ b/src/components/ExpandableText/index.tsx @@ -32,8 +32,8 @@ const ExpandableText = ({ text, setCurrentHeight }: ExpandableTextProps) => { useEffect(() => { setCurrentHeight( - ref.current?.clientHeight || - DEFAULT_DESCRIPTION_HEIGHT + TEXT_BOTTOM_MARGIN + (ref.current?.clientHeight || DEFAULT_DESCRIPTION_HEIGHT) + + TEXT_BOTTOM_MARGIN ); }, [isExpanded, setCurrentHeight]); return ( From 92d558df174f8f619ecef8f67e981885c210289f Mon Sep 17 00:00:00 2001 From: Megan Riel-Mehan Date: Fri, 14 Nov 2025 16:47:53 -0800 Subject: [PATCH 06/20] Update src/components/PackingInput/index.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/PackingInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx index ab9b470c..585b9570 100644 --- a/src/components/PackingInput/index.tsx +++ b/src/components/PackingInput/index.tsx @@ -44,7 +44,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { const siderHeight = useSiderHeight(); const [availableRecipeHeight, setAvailableRecipeHeight] = useState( - siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT + siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN ); const [descriptionHeight, setDescriptionHeight] = useState( DEFAULT_DESCRIPTION_HEIGHT From 524fc3737b3992d7bb2e6c5c659f4c20d4448745 Mon Sep 17 00:00:00 2001 From: Megan Riel-Mehan Date: Fri, 14 Nov 2025 16:48:17 -0800 Subject: [PATCH 07/20] Update src/components/PackingInput/index.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/PackingInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx index 585b9570..7e45d27e 100644 --- a/src/components/PackingInput/index.tsx +++ b/src/components/PackingInput/index.tsx @@ -59,7 +59,7 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { useEffect(() => { const newAvailableHeight = getAvailableHeight(); setAvailableRecipeHeight(newAvailableHeight); - }, [setAvailableRecipeHeight, getAvailableHeight]); + }, [getAvailableHeight]); const preFetchInputsAndRecipes = useCallback(async () => { await loadInputOptions(); From 19abf918c9cf449c456bc0001c4f013f2280f5f7 Mon Sep 17 00:00:00 2001 From: meganrm Date: Fri, 14 Nov 2025 16:48:39 -0800 Subject: [PATCH 08/20] re-order imports --- src/components/ExpandableText/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ExpandableText/index.tsx b/src/components/ExpandableText/index.tsx index 01bc845b..8701441e 100644 --- a/src/components/ExpandableText/index.tsx +++ b/src/components/ExpandableText/index.tsx @@ -1,12 +1,12 @@ import { Typography } from "antd"; import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons"; -import "./style.css"; import { useEffect, useRef, useState } from "react"; import { DEFAULT_DESCRIPTION_HEIGHT, TEXT_BOTTOM_MARGIN, } from "../../constants"; +import "./style.css"; const { Paragraph } = Typography; interface ExpandableTextProps { From 9335fc8585942ea56a0ed88e40ca744a884ff3f5 Mon Sep 17 00:00:00 2001 From: meganrm Date: Mon, 17 Nov 2025 14:11:07 -0800 Subject: [PATCH 09/20] scroll within recipe container --- src/App.css | 3 +-- src/App.tsx | 2 +- src/components/JSONViewer/index.tsx | 5 +++-- src/components/JSONViewer/style.css | 3 +-- src/components/PackingInput/index.tsx | 13 +++++++++++-- src/components/PackingInput/style.css | 4 ++++ 6 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index 232eff17..f03baa79 100644 --- a/src/App.css +++ b/src/App.css @@ -22,8 +22,7 @@ } .sider { - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; padding: 0 40px; } diff --git a/src/App.tsx b/src/App.tsx index dd5c949e..a2af6478 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -177,7 +177,7 @@ function App() { width="35%" theme="light" className="sider" - style={{ height: siderHeight }} + // style={{ height: siderHeight }} > diff --git a/src/components/JSONViewer/index.tsx b/src/components/JSONViewer/index.tsx index 65293b68..f6b37fdc 100644 --- a/src/components/JSONViewer/index.tsx +++ b/src/components/JSONViewer/index.tsx @@ -11,11 +11,12 @@ import { ViewableRecipe } from "../../types"; interface JSONViewerProps { title: string; + availableHeight?: number; content?: ViewableRecipe; } const JSONViewer = (props: JSONViewerProps): JSX.Element | null => { - const { content } = props; + const { content, availableHeight } = props; if (!content) { return null; @@ -67,7 +68,7 @@ const JSONViewer = (props: JSONViewerProps): JSX.Element | null => { }); return ( -
+
{ const siderHeight = useSiderHeight(); const [availableRecipeHeight, setAvailableRecipeHeight] = useState( - siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN + siderHeight - + DEFAULT_DESCRIPTION_HEIGHT - + SELECT_HEIGHT - + TEXT_BOTTOM_MARGIN ); const [descriptionHeight, setDescriptionHeight] = useState( DEFAULT_DESCRIPTION_HEIGHT @@ -116,7 +119,13 @@ const PackingInput = (props: PackingInputProps): JSX.Element => { /> - + diff --git a/src/components/PackingInput/style.css b/src/components/PackingInput/style.css index 686eed8c..4eebc414 100644 --- a/src/components/PackingInput/style.css +++ b/src/components/PackingInput/style.css @@ -5,3 +5,7 @@ align-items: center; height: var(--recipe-select-height); } + +.ant-tabs-content-holder { + overflow-y: auto; +} From bcf948c832e98c5a32ffca18e5b58c5fe6de8150 Mon Sep 17 00:00:00 2001 From: meganrm Date: Mon, 17 Nov 2025 17:16:21 -0800 Subject: [PATCH 10/20] maintain height --- src/components/ExpandableText/index.tsx | 6 +++++- src/components/PackingInput/index.tsx | 15 +++++---------- src/components/RecipeForm/index.tsx | 1 + src/components/RecipeForm/style.css | 4 ++++ src/hooks/useSiderHeight.tsx | 2 +- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/ExpandableText/index.tsx b/src/components/ExpandableText/index.tsx index 8701441e..ea358401 100644 --- a/src/components/ExpandableText/index.tsx +++ b/src/components/ExpandableText/index.tsx @@ -30,12 +30,16 @@ const ExpandableText = ({ text, setCurrentHeight }: ExpandableTextProps) => { const [isExpanded, setIsExpanded] = useState(false); const ref = useRef(null); + useEffect(() => { + setIsExpanded(false); + }, [text]); + useEffect(() => { setCurrentHeight( (ref.current?.clientHeight || DEFAULT_DESCRIPTION_HEIGHT) + TEXT_BOTTOM_MARGIN ); - }, [isExpanded, setCurrentHeight]); + }, [isExpanded, setCurrentHeight, text]); return ( { const storeStartPacking = useStartPacking(); const siderHeight = useSiderHeight(); - const [availableRecipeHeight, setAvailableRecipeHeight] = useState( - siderHeight - - DEFAULT_DESCRIPTION_HEIGHT - - SELECT_HEIGHT - - TEXT_BOTTOM_MARGIN - ); const [descriptionHeight, setDescriptionHeight] = useState( - DEFAULT_DESCRIPTION_HEIGHT + DEFAULT_DESCRIPTION_HEIGHT + TEXT_BOTTOM_MARGIN + ); + const [availableRecipeHeight, setAvailableRecipeHeight] = useState( + siderHeight - descriptionHeight - SELECT_HEIGHT ); const getAvailableHeight = useCallback(() => { - return ( - siderHeight - descriptionHeight - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN - ); + return siderHeight - descriptionHeight - SELECT_HEIGHT; }, [siderHeight, descriptionHeight]); useEffect(() => { diff --git a/src/components/RecipeForm/index.tsx b/src/components/RecipeForm/index.tsx index 053b0166..1e10ff7a 100644 --- a/src/components/RecipeForm/index.tsx +++ b/src/components/RecipeForm/index.tsx @@ -49,6 +49,7 @@ const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => { >