catchup-library-web 2.5.12 → 2.5.14

package/dist/index.d.mts

@@ -127,7 +127,6 @@ interface IActivityBodyContentProps {
     bodyMap: any;
     contentMap?: any;
     answerMap?: any;
-    fillHeight?: boolean;
 }
 interface IOrderingActivityProps {
     answerMap: any;
@@ -233,7 +232,7 @@ interface IActivityPreviewByDataProps {
     isPreview: boolean;
 }
 
-declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, fillHeight, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element | null;
+declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const DropdownActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -127,7 +127,6 @@ interface IActivityBodyContentProps {
     bodyMap: any;
     contentMap?: any;
     answerMap?: any;
-    fillHeight?: boolean;
 }
 interface IOrderingActivityProps {
     answerMap: any;
@@ -233,7 +232,7 @@ interface IActivityPreviewByDataProps {
     isPreview: boolean;
 }
 
-declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, fillHeight, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element | null;
+declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const DropdownActivityContent: ({ answerMap, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3743,8 +3743,7 @@ var ActivityBodyContent = ({
   templateType,
   bodyMap,
   contentMap,
-  answerMap,
-  fillHeight = false
+  answerMap
 }) => {
   if (!bodyMap) return null;
   const processBodyValue = (bodyValue, contentType, answerMap2, startIndex) => {
@@ -3820,7 +3819,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `flex flex-col justify-center items-center overflow-y-auto ${fillHeight ? "h-full" : "max-h-[40vh]"}`, children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col justify-center items-center h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -4799,8 +4798,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4811,7 +4810,7 @@ var DropdownActivityContent = ({
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5244,8 +5243,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5256,7 +5255,7 @@ var FillInTheBlanksActivityContent = ({
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6098,18 +6097,17 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
-        templateType: "MATCHING",
-        fillHeight: !isFullScreen
+        templateType: "MATCHING"
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6266,11 +6264,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6414,11 +6412,11 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6631,11 +6629,11 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
-        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
+        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto" : "w-full"}`,
         children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ActivityBodyContent_default,
           {
@@ -6654,7 +6652,7 @@ var OpenEndedActivityContent = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         OpenEndedActivityMaterialContent_default,
         {
           answerMap,
@@ -6940,18 +6938,17 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
-        templateType: "ORDERING",
-        fillHeight: !isFullScreen
+        templateType: "ORDERING"
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -7136,8 +7133,8 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
@@ -7146,7 +7143,7 @@ var TrueFalseActivityContent = ({
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),

package/dist/index.mjs

@@ -3509,8 +3509,7 @@ var ActivityBodyContent = ({
   templateType,
   bodyMap,
   contentMap,
-  answerMap,
-  fillHeight = false
+  answerMap
 }) => {
   if (!bodyMap) return null;
   const processBodyValue = (bodyValue, contentType, answerMap2, startIndex) => {
@@ -3586,7 +3585,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx21("div", { className: `flex flex-col justify-center items-center overflow-y-auto ${fillHeight ? "h-full" : "max-h-[40vh]"}`, children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col justify-center items-center h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -4565,8 +4564,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx27(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4577,7 +4576,7 @@ var DropdownActivityContent = ({
     ) }),
     /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx27(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx27("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx27(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5010,8 +5009,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx30(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5022,7 +5021,7 @@ var FillInTheBlanksActivityContent = ({
     ) }),
     /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx30(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx30(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx30("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx30(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5864,18 +5863,17 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx34(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
-        templateType: "MATCHING",
-        fillHeight: !isFullScreen
+        templateType: "MATCHING"
       }
     ) }),
     /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx34(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`, children: /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx34("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx34(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6032,11 +6030,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx36(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx36(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
     /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx36(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx36("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx36(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6180,11 +6178,11 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx38(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+  return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx38(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
     /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx38(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx38("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx38(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6397,11 +6395,11 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-row flex-wrap h-full", children: [
     /* @__PURE__ */ jsx40(
       "div",
       {
-        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
+        className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto" : "w-full"}`,
         children: /* @__PURE__ */ jsx40(
           ActivityBodyContent_default,
           {
@@ -6420,7 +6418,7 @@ var OpenEndedActivityContent = ({
         }
       ),
       /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx40(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx40("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx40(
         OpenEndedActivityMaterialContent_default,
         {
           answerMap,
@@ -6706,18 +6704,17 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx42(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
-        templateType: "ORDERING",
-        fillHeight: !isFullScreen
+        templateType: "ORDERING"
       }
     ) }),
     /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx42(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`, children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx42("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx42(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6902,8 +6899,8 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-row flex-wrap h-full", children: [
+    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx44(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
@@ -6912,7 +6909,7 @@ var TrueFalseActivityContent = ({
     ) }),
     /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx44(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx44(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx44("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx44(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.5.12",
+  "version": "2.5.14",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/DropdownActivityContent.tsx

@@ -40,8 +40,8 @@ const DropdownActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={dropdownBodyMap}
           answerMap={currentAnswerMap} // Use local state instead of function call
@@ -55,7 +55,7 @@ const DropdownActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <DropdownActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -69,8 +69,8 @@ const FillInTheBlanksActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={fillInTheBlanksBodyMap}
           answerMap={currentAnswerMap}
@@ -84,7 +84,7 @@ const FillInTheBlanksActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <FillInTheBlanksActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/MCMAActivityContent.tsx

@@ -40,8 +40,8 @@ const MCMAActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent bodyMap={MCMABodyMap} templateType={"MCMA"} />
       </div>
       <div className={`${isFullScreen ? "contents" : "contents md:hidden"}`}>
@@ -50,7 +50,7 @@ const MCMAActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <MCMAActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/MCSAActivityContent.tsx

@@ -33,8 +33,8 @@ const MCSAActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`}>
         <ActivityBodyContent bodyMap={MCSABodyMap} templateType="MCSA" />
       </div>
       <div className={`${isFullScreen ? "contents" : "contents md:hidden"}`}>
@@ -43,7 +43,7 @@ const MCSAActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <MCSAActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/MatchingActivityContent.tsx

@@ -33,12 +33,11 @@ const MatchingActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={matchingBodyMap}
           templateType={"MATCHING"}
-          fillHeight={!isFullScreen}
         />
       </div>
       <div className={`${isFullScreen ? "contents" : "contents md:hidden"}`}>
@@ -47,7 +46,7 @@ const MatchingActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <MatchingActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/OpenEndedActivityContent.tsx

@@ -27,13 +27,13 @@ const OpenEndedActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
+    <div className="flex flex-row flex-wrap h-full">
       <div
         className={`${
           showMaterialContent
             ? isFullScreen
               ? "w-full"
-              : "w-full md:w-[40%]"
+              : "w-full md:w-[40%] md:overflow-y-auto"
             : "w-full"
         }`}
       >
@@ -53,7 +53,7 @@ const OpenEndedActivityContent = ({
           <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
             <VerticalDividerLine />
           </div>
-          <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+          <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
             <OpenEndedActivityMaterialContent
               answerMap={answerMap}
               contentMap={contentMap}

package/src/components/activities/OrderingActivityContent.tsx

@@ -35,12 +35,11 @@ const OrderingActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[30%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={orderingBodyMap}
           templateType={"ORDERING"}
-          fillHeight={!isFullScreen}
         />
       </div>
       <div className={`${isFullScreen ? "contents" : "contents md:hidden"}`}>
@@ -49,7 +48,7 @@ const OrderingActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[70%]"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <OrderingActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/TrueFalseActivityContent.tsx

@@ -59,8 +59,8 @@ const TrueFalseActivityContent = ({
   };
 
   return (
-    <div className="flex flex-row flex-wrap">
-      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`}>
+    <div className="flex flex-row flex-wrap h-full">
+      <div className={`${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`}>
         <ActivityBodyContent
           bodyMap={trueFalseBodyMap}
           templateType={"GROUPING"}
@@ -73,7 +73,7 @@ const TrueFalseActivityContent = ({
       <div className={`${isFullScreen ? "hidden" : "hidden md:block"}`}>
         <VerticalDividerLine />
       </div>
-      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
+      <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`}>
         <TrueFalseActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
           answerMap={answerMap}

package/src/components/activities/body-contents/ActivityBodyContent.tsx

@@ -6,7 +6,6 @@ const ActivityBodyContent = ({
   bodyMap,
   contentMap,
   answerMap,
-  fillHeight = false,
 }: IActivityBodyContentProps) => {
   if (!bodyMap) return null;
 
@@ -108,7 +107,7 @@ const ActivityBodyContent = ({
     .filter(Boolean);
 
   return (
-    <div className={`flex flex-col justify-center items-center overflow-y-auto ${fillHeight ? "h-full" : "max-h-[40vh]"}`}>
+    <div className="flex flex-col justify-center items-center h-full overflow-y-auto">
       {processedBodies.map((body, index) => (
         <ShowBodyMediaByContentType
           key={`body-${body.key}-${index}`}

package/src/properties/ActivityProperties.ts

@@ -17,7 +17,6 @@ export interface IActivityBodyContentProps {
   bodyMap: any;
   contentMap?: any;
   answerMap?: any;
-  fillHeight?: boolean;
 }
 
 export interface IOrderingActivityProps {