diff --git a/src/App.css b/src/App.css
index 4303c63c..f03baa79 100644
--- a/src/App.css
+++ b/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;
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index 235cae3c..c330ada3 100644
--- a/src/App.tsx
+++ b/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();
diff --git a/src/components/ExpandableDescription/index.tsx b/src/components/ExpandableDescription/index.tsx
deleted file mode 100644
index 3fe2cab0..00000000
--- a/src/components/ExpandableDescription/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Typography } from "antd";
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
-import "./style.css";
-
-const { Paragraph } = Typography;
-
-interface ExpandableTextProps {
-    text: string;
-}
-
-const expandSymbol = (
-    <span>
-        expand <ArrowDownOutlined />
-    </span>
-);
-
-const collapseSymbol = (
-    <span>
-        collapse <ArrowUpOutlined />
-    </span>
-);
-
-export const ExpandableText = ({ text }: ExpandableTextProps) => {
-    return (
-        <Paragraph
-            ellipsis={{
-                rows: 2,
-                expandable: "collapsible",
-                symbol: (expanded) =>
-                    expanded ? collapseSymbol : expandSymbol,
-            }}
-        >
-            {text}
-        </Paragraph>
-    );
-};
-export default ExpandableText;
\ No newline at end of file
diff --git a/src/components/ExpandableText/index.tsx b/src/components/ExpandableText/index.tsx
new file mode 100644
index 00000000..3f545080
--- /dev/null
+++ b/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;
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/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 (
-        <div className="full-recipe">
+        <div className="full-recipe" style={{ height: availableHeight }}>
             <Descriptions
                 size="small"
                 bordered
diff --git a/src/components/JSONViewer/style.css b/src/components/JSONViewer/style.css
index 868106dd..828cfd9a 100644
--- a/src/components/JSONViewer/style.css
+++ b/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;
 }
diff --git a/src/components/PackingInput/index.tsx b/src/components/PackingInput/index.tsx
index eb68e2ec..a2de51da 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, 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>
                 </>
diff --git a/src/components/PackingInput/style.css b/src/components/PackingInput/style.css
index a90c791f..4eebc414 100644
--- a/src/components/PackingInput/style.css
+++ b/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;
 }
diff --git a/src/components/RecipeForm/index.tsx b/src/components/RecipeForm/index.tsx
index 3ac7bb04..1e10ff7a 100644
--- a/src/components/RecipeForm/index.tsx
+++ b/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>
diff --git a/src/components/RecipeForm/style.css b/src/components/RecipeForm/style.css
index 41759d1c..23af0832 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(
-        100vh - var(--header-height) - var(--recipe-select-height) -
-            var(--tab-height) - var(--footer-height) - var(--description-height)
-    );
+}
+
+.packing-button {
+    margin-bottom: 20px;
 }
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;
diff --git a/src/hooks/useSiderHeight.tsx b/src/hooks/useSiderHeight.tsx
new file mode 100644
index 00000000..71323b87
--- /dev/null
+++ b/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;
+}