Fix/vertical spacing

src/App.css

@@ -22,9 +22,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;

src/App.tsx

@@ -19,19 +19,22 @@ 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<string>("");
+
     const setJobLogs = useSetJobLogs();
     const jobLogs = useJobLogs();
     const setJobId = useSetJobId();
     const jobId = useJobId();
     const setPackingResults = useSetPackingResults();
     const runTime = useRunTime();
     const outputDir = useOutputsDirectory();
+    const siderHeight = useSiderHeight();
 
     let start = 0;
 
@@ -170,7 +173,12 @@ function App() {
                 </Link>
             </Header>
             <Layout>
-                <Sider width="35%" theme="light" className="sider">
+                <Sider
+                    width="35%"
+                    theme="light"
+                    className="sider"
+                    style={{ height: siderHeight }}
+                >
                     <PackingInput startPacking={startPacking} />
                 </Sider>
                 <Content className="content-container">

src/components/ExpandableText/index.tsx

@@ -0,0 +1,57 @@
+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;
+    setCurrentHeight: (height: number) => void;
+}
+
+const expandSymbol = (
+    <span>
+        expand <ArrowDownOutlined />
+    </span>
+);
+
+const collapseSymbol = (
+    <span>
+        collapse <ArrowUpOutlined />
+    </span>
+);
+
+const ExpandableText = ({ text, setCurrentHeight }: ExpandableTextProps) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(false);
+    const ref = useRef<HTMLParagraphElement>(null);
+
+    useEffect(() => {
+        setCurrentHeight(
+            (ref.current?.clientHeight || DEFAULT_DESCRIPTION_HEIGHT) +
+                TEXT_BOTTOM_MARGIN
+        );
+    }, [isExpanded, setCurrentHeight]);
+    return (
+        <Paragraph
+            ref={ref}
+            ellipsis={{
+                rows: 2,
+                expandable: "collapsible",
+                onExpand: (_, info) => {
+                    setIsExpanded(info.expanded);
+                },
+                expanded: isExpanded,
+                symbol: (expanded) =>
+                    expanded ? collapseSymbol : expandSymbol,
+            }}
+        >
+            {text}
+        </Paragraph>
+    );
+};
+export default ExpandableText;

src/components/PackingInput/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Tabs } from "antd";
 
 import {
@@ -13,8 +13,15 @@ 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";
+import {
+    DEFAULT_DESCRIPTION_HEIGHT,
+    SELECT_HEIGHT,
+    TABS_HEADER_HEIGHT,
+    TEXT_BOTTOM_MARGIN,
+} from "../../constants";
 
 interface PackingInputProps {
     startPacking: (
@@ -34,6 +41,25 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const loadAllRecipes = useLoadAllRecipes();
     const selectRecipe = useSelectRecipe();
     const storeStartPacking = useStartPacking();
+    const siderHeight = useSiderHeight();
+
+    const [availableRecipeHeight, setAvailableRecipeHeight] = useState<number>(
+        siderHeight - DEFAULT_DESCRIPTION_HEIGHT - SELECT_HEIGHT
+    );
+    const [descriptionHeight, setDescriptionHeight] = useState<number>(
+        DEFAULT_DESCRIPTION_HEIGHT
+    );
+
+    const getAvailableHeight = useCallback(() => {
+        return (
+            siderHeight - descriptionHeight - SELECT_HEIGHT - TEXT_BOTTOM_MARGIN
+        );
+    }, [siderHeight, descriptionHeight]);
+
+    useEffect(() => {
+        const newAvailableHeight = getAvailableHeight();
+        setAvailableRecipeHeight(newAvailableHeight);
+    }, [setAvailableRecipeHeight, getAvailableHeight]);
 
     const preFetchInputsAndRecipes = useCallback(async () => {
         await loadInputOptions();
@@ -73,11 +99,21 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
             ) : (
                 <>
                     {recipeObj.description && (
-                        <ExpandableText text={recipeObj.description} />
+                        <div className="recipe-description">
+                            <ExpandableText
+                                text={recipeObj.description}
+                                setCurrentHeight={setDescriptionHeight}
+                            />
+                        </div>
                     )}
                     <Tabs defaultActiveKey="1" className="recipe-content">
                         <Tabs.TabPane tab="Editable fields" key="1">
-                            <RecipeForm onStartPacking={handleStartPacking} />
+                            <RecipeForm
+                                onStartPacking={handleStartPacking}
+                                availableHeight={
+                                    availableRecipeHeight - TABS_HEADER_HEIGHT
+                                }
+                            />
                         </Tabs.TabPane>
                         <Tabs.TabPane tab="Full Recipe" key="2">
                             <JSONViewer title="Recipe" content={recipeObj} />

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));
-}

src/components/RecipeForm/index.tsx

@@ -10,16 +10,17 @@ import {
 
 interface RecipeFormProps {
     onStartPacking: () => Promise<void>;
+    availableHeight: number;
 }
 
-const RecipeForm = ({ onStartPacking }: RecipeFormProps) => {
+const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => {
     const recipeId = useSelectedRecipeId();
     const fieldsToDisplay = useFieldsToDisplay();
     const isPacking = useIsPacking();
     const isOriginalRecipe = useIsOriginalRecipe();
 
     return (
-        <div className="recipe-form">
+        <div className="recipe-form" style={{ height: availableHeight }}>
             {fieldsToDisplay && (
                 <div className="input-container">
                     {fieldsToDisplay.map((field) => (
@@ -51,7 +52,7 @@ const RecipeForm = ({ onStartPacking }: RecipeFormProps) => {
                         color="primary"
                         variant="filled"
                         disabled={isPacking || isOriginalRecipe}
-                        style={{ width: "100%" }}
+                        style={{ width: "100%", minHeight: 38 }}
                     >
                         <strong>Re-run</strong>
                     </Button>

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) - var(--description-height)
-    );
 }

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;

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<number>(
+        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;
+}