Fix/vertical spacing

src/App.css

@@ -22,11 +22,7 @@
 }
 
 .sider {
-    height: calc(
-        100vh - var(--header-height) - var(--footer-height)
-    ); /* full height minus header and footer */
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
     padding: 0 40px;
 }
 

src/App.tsx

@@ -25,6 +25,7 @@ const { Link } = Typography;
 
 function App() {
     const [jobStatus, setJobStatus] = useState<string>("");
+
     const setJobLogs = useSetJobLogs();
     const jobLogs = useJobLogs();
     const setJobId = useSetJobId();

src/components/ExpandableText/index.tsx

@@ -0,0 +1,61 @@
+import { Typography } from "antd";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+    DEFAULT_DESCRIPTION_HEIGHT,
+    TEXT_BOTTOM_MARGIN,
+} from "../../constants";
+
+import "./style.css";
+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(() => {
+        setIsExpanded(false);
+    }, [text]);
+
+    useLayoutEffect(() => {
+        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/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 (
-        <div className="full-recipe">
+        <div className="full-recipe" style={{ height: availableHeight }}>
             <Descriptions
                 size="small"
                 bordered

src/components/JSONViewer/style.css

@@ -6,7 +6,6 @@
 .full-recipe {
     display: flex;
     flex-direction: column;
-    border: 1px solid #d9d9d9;
     border-radius: 6px;
     font-size: 14px;
 }
@@ -20,5 +19,5 @@
     padding: 10px;
     font-size: 16px;
     font-weight: 600;
-    border-top: 0.5px solid;
+    border-top: 0.5px solid #d9d9d9;
 }

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,20 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const loadAllRecipes = useLoadAllRecipes();
     const selectRecipe = useSelectRecipe();
     const storeStartPacking = useStartPacking();
+    const siderHeight = useSiderHeight();
+
+    const [descriptionHeight, setDescriptionHeight] = useState<number>(
+        DEFAULT_DESCRIPTION_HEIGHT + TEXT_BOTTOM_MARGIN
+    );
+    const [availableRecipeHeight, setAvailableRecipeHeight] = useState<number>(
+        siderHeight - descriptionHeight - SELECT_HEIGHT
+    );
+
+    useEffect(() => {
+        const newAvailableHeight =
+            siderHeight - descriptionHeight - SELECT_HEIGHT;
+        setAvailableRecipeHeight(newAvailableHeight);
+    }, [siderHeight, descriptionHeight]);
 
     const preFetchInputsAndRecipes = useCallback(async () => {
         await loadInputOptions();
@@ -73,14 +94,30 @@ 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} />
+                            <JSONViewer
+                                title="Recipe"
+                                content={recipeObj}
+                                availableHeight={
+                                    availableRecipeHeight - TABS_HEADER_HEIGHT
+                                }
+                            />
                         </Tabs.TabPane>
                     </Tabs>
                 </>

src/components/PackingInput/style.css

@@ -6,6 +6,6 @@
     height: var(--recipe-select-height);
 }
 
-.recipe-content {
-    height: calc(100% - var(--recipe-select-height));
+.ant-tabs-content-holder {
+    overflow-y: auto;
 }

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) => (
@@ -48,10 +49,11 @@ const RecipeForm = ({ onStartPacking }: RecipeFormProps) => {
                 >
                     <Button
                         onClick={onStartPacking}
+                        className="packing-button"
                         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,8 @@
     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)
-    );
+}
+
+.packing-button {
+    margin-bottom: 20px;
 }

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 = 51;
+
+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;
+}