catchup-library-web 1.14.4 → 1.14.5

package/dist/index.js

@@ -3270,15 +3270,8 @@ var ShowBodyMediaByContentType = ({
         return "";
     }
   };
-  const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "span",
-      {
-        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
-      },
-      `${parentKey}-expr-${partIndex}`
-    );
+  const renderSpecialExpressions = (inputPart) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value });
   };
   const balanceSpecialChars = (text) => {
     let result = text;
@@ -3295,8 +3288,8 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
-      (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(balancedText).map(
+      (inputPart) => renderSpecialExpressions(inputPart)
     ) }, itemKey);
   };
   const handleOpenFullScreen = (imageSource) => {
@@ -3328,8 +3321,8 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
-            (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+            (inputPart) => renderSpecialExpressions(inputPart)
           ) }, itemKey)
         );
         copyValue = copyValue.substring(
@@ -3508,7 +3501,7 @@ var ShowBodyMediaByContentType = ({
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3580,9 +3573,9 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             className: `${convertToPercentage(
@@ -3618,7 +3611,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "video",
           {
             src: value,
@@ -3629,7 +3622,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }

package/dist/index.mjs

@@ -3040,7 +3040,7 @@ var retrieveDifficultyByActivityTypeFromData = (type, data) => {
 
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3061,15 +3061,8 @@ var ShowBodyMediaByContentType = ({
         return "";
     }
   };
-  const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
-    return /* @__PURE__ */ jsx16(
-      "span",
-      {
-        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx16("span", { className: "text-2xl", children: /* @__PURE__ */ jsx16(InlineMath, { math: inputPart.value }) }) : inputPart.value
-      },
-      `${parentKey}-expr-${partIndex}`
-    );
+  const renderSpecialExpressions = (inputPart) => {
+    return /* @__PURE__ */ jsx16(Fragment, { children: inputPart.isEquation ? /* @__PURE__ */ jsx16("span", { className: "text-2xl", children: /* @__PURE__ */ jsx16(InlineMath, { math: inputPart.value }) }) : inputPart.value });
   };
   const balanceSpecialChars = (text) => {
     let result = text;
@@ -3086,8 +3079,8 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ jsx16("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
-      (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+    return /* @__PURE__ */ jsx16("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(balancedText).map(
+      (inputPart) => renderSpecialExpressions(inputPart)
     ) }, itemKey);
   };
   const handleOpenFullScreen = (imageSource) => {
@@ -3119,8 +3112,8 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ jsx16("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
-            (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+          /* @__PURE__ */ jsx16("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+            (inputPart) => renderSpecialExpressions(inputPart)
           ) }, itemKey)
         );
         copyValue = copyValue.substring(
@@ -3299,7 +3292,7 @@ var ShowBodyMediaByContentType = ({
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
                 /* @__PURE__ */ jsx16("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx16("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ jsx16("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
+                /* @__PURE__ */ jsx16("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3371,9 +3364,9 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+        return /* @__PURE__ */ jsx16("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx16("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsx16("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs10(
           "div",
           {
             className: `${convertToPercentage(
@@ -3409,7 +3402,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx16("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx16(
           "video",
           {
             src: value,
@@ -3420,7 +3413,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ jsx16("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx16("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ jsx16("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx16("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
@@ -3547,7 +3540,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
 import { useEffect as useEffect3, useRef, useState as useState11, useCallback } from "react";
-import { Fragment, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3966,7 +3959,7 @@ var InputGroup = ({
       return CheckboxInputGroup();
     }
   };
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
     RenderMainContent(),
     /* @__PURE__ */ jsx20(MathConstructorModal, {})
   ] });
@@ -4927,7 +4920,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5026,7 +5019,7 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment3, { children: [
     /* @__PURE__ */ jsx29(
       "div",
       {
@@ -5204,7 +5197,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5229,7 +5222,7 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs19(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
     /* @__PURE__ */ jsx30(
       ActivityBodyContent_default,
       {
@@ -5259,7 +5252,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 import { useEffect as useEffect11, useRef as useRef5, useState as useState20 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5355,7 +5348,7 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
     /* @__PURE__ */ jsx31(
       "div",
       {
@@ -5511,7 +5504,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5532,7 +5525,7 @@ var MatchingActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
     /* @__PURE__ */ jsx32(
       ActivityBodyContent_default,
       {
@@ -5859,7 +5852,7 @@ var MCSAActivityContent = ({
 var MCSAActivityContent_default = MCSAActivityContent;
 
 // src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -5895,7 +5888,7 @@ var OpenEndedActivityMaterialContent = ({
     );
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ jsx37(Fragment6, { children: /* @__PURE__ */ jsxs26("div", { className: "", children: [
+  return /* @__PURE__ */ jsx37(Fragment7, { children: /* @__PURE__ */ jsxs26("div", { className: "", children: [
     /* @__PURE__ */ jsx37("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx37("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
     /* @__PURE__ */ jsx37("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null
@@ -5904,7 +5897,7 @@ var OpenEndedActivityMaterialContent = ({
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -5936,7 +5929,7 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs27(Fragment7, { children: [
+    showMaterialContent ? /* @__PURE__ */ jsxs27(Fragment8, { children: [
       /* @__PURE__ */ jsx38(
         "div",
         {
@@ -6176,7 +6169,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6199,7 +6192,7 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
     /* @__PURE__ */ jsx41(
       ActivityBodyContent_default,
       {
@@ -6228,7 +6221,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect13, useState as useState22 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6350,7 +6343,7 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    }) }) : /* @__PURE__ */ jsxs30(Fragment10, { children: [
       answerMap.trueList.map((item) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
         /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("true") }) })

package/package.json

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

package/src/components/activities/body-content/ShowBodyMediaByContentType.tsx

@@ -33,18 +33,9 @@ const ShowBodyMediaByContentType = ({
   };
 
   // Helper function to render special expressions with proper keys
-  const renderSpecialExpressions = (
-    inputPart: IInputPart,
-    partIndex: number,
-    parentKey: string
-  ) => {
+  const renderSpecialExpressions = (inputPart: IInputPart) => {
     return (
-      <span
-        key={`${parentKey}-expr-${partIndex}`}
-        className={`${inputPart.isBold ? "font-bold" : ""} ${
-          inputPart.isUnderline ? "underline" : ""
-        }`}
-      >
+      <>
         {inputPart.isEquation ? (
           <span className="text-2xl">
             <InlineMath math={inputPart.value} />
@@ -52,7 +43,7 @@ const ShowBodyMediaByContentType = ({
         ) : (
           inputPart.value
         )}
-      </span>
+      </>
     );
   };
 
@@ -83,10 +74,9 @@ const ShowBodyMediaByContentType = ({
     const balancedText = balanceSpecialChars(text);
 
     return (
-      <span key={itemKey} className="text-xl whitespace-pre-wrap">
+      <span key={itemKey} className="text-xl">
         {constructInputWithSpecialExpressionList(balancedText).map(
-          (inputPart: IInputPart, exprIndex: number) =>
-            renderSpecialExpressions(inputPart, exprIndex, itemKey)
+          (inputPart: IInputPart) => renderSpecialExpressions(inputPart)
         )}
       </span>
     );
@@ -131,10 +121,9 @@ const ShowBodyMediaByContentType = ({
         const itemKey = `text-inside-${index}-${currentIndex}`;
 
         valuePartList.push(
-          <span key={itemKey} className="text-xl font-bold whitespace-pre-wrap">
+          <span key={itemKey} className="text-xl font-bold">
             {constructInputWithSpecialExpressionList(textInsideTag).map(
-              (inputPart: IInputPart, exprIndex: number) =>
-                renderSpecialExpressions(inputPart, exprIndex, itemKey)
+              (inputPart: IInputPart) => renderSpecialExpressions(inputPart)
             )}
           </span>
         );
@@ -331,7 +320,7 @@ const ShowBodyMediaByContentType = ({
             <div className="absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2">
               <p className="font-bold">{i18n.t("image_description")}</p>
             </div>
-            <span className="text-xl whitespace-pre-wrap">{imageText}</span>
+            <span className="text-xl">{imageText}</span>
           </div>
         );
       } else {
@@ -403,13 +392,13 @@ const ShowBodyMediaByContentType = ({
     switch (type) {
       case "TEXT":
         return (
-          <div className="mb-3 flex flex-row flex-wrap items-center mx-auto w-full">
-            {retrieveValueParts(value)}
+          <div className="mb-1 flex flex-row flex-wrap items-center mx-auto w-full">
+            <p className="whitespace-pre-wrap">{retrieveValueParts(value)}</p>
           </div>
         );
       case "IMAGE":
         return (
-          <div className="mb-3 flex flex-col items-center relative">
+          <div className="mb-1 flex flex-col items-center relative">
             <div
               className={`${convertToPercentage(
                 size || ""
@@ -437,7 +426,7 @@ const ShowBodyMediaByContentType = ({
         );
       case "VIDEO":
         return (
-          <div className="mb-3 flex flex-col items-center">
+          <div className="mb-1 flex flex-col items-center">
             <video
               src={value}
               className={`${convertToPercentage(
@@ -449,7 +438,7 @@ const ShowBodyMediaByContentType = ({
         );
       case "AUDIO":
         return (
-          <div className="mb-3 flex flex-col items-center">
+          <div className="mb-1 flex flex-col items-center">
             <audio src={value} controls className="rounded-catchup-xlarge" />
           </div>
         );