@dcodegroup-au/page-builder 0.7.1 → 0.7.3

package/dist/page-builder.es.js

@@ -45236,7 +45236,7 @@ const _hoisted_15$6 = {
 };
 const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_18$3 = { key: 2 };
+const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
   props: {
@@ -45436,7 +45436,7 @@ const _sfc_main$C = {
                       sites: _ctx.sites,
                       forms: __props.forms
                     }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : createCommentVNode("", true)
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$3, [
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$2, [
                     createVNode(_sfc_main$P, {
                       "is-vertical": "",
                       field: "image",
@@ -46173,7 +46173,7 @@ const _hoisted_15$5 = {
 };
 const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
 const _hoisted_17$2 = ["value"];
-const _hoisted_18$2 = {
+const _hoisted_18$1 = {
   key: 1,
   class: "rounded-xl bg-gray-50 px-6 py-5"
 };
@@ -46338,7 +46338,7 @@ const _sfc_main$t = {
                 _cache[2] || (_cache[2] = createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
               ])
             ])) : createCommentVNode("", true),
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$1, [
               createVNode(Instructions)
             ])) : createCommentVNode("", true),
             (openBlock(), createBlock(resolveDynamicComponent(currentComponent.value), {
@@ -49043,37 +49043,33 @@ const _sfc_main$e = {
 };
 const _hoisted_1$q = { class: "overflow-hidden" };
 const _hoisted_2$c = { class: "max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4" };
-const _hoisted_3$c = {
-  key: 0,
-  class: "grid lg:grid-cols-[33%_auto] gap-1.5 lg:gap-4"
-};
-const _hoisted_4$c = { class: "text-[20px] text-gray-900 font-semibold" };
-const _hoisted_5$c = ["innerHTML"];
-const _hoisted_6$c = {
+const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
+const _hoisted_4$c = ["innerHTML"];
+const _hoisted_5$c = {
   key: 1,
   class: "rounded-xl md:rounded-3xl overflow-hidden relative"
 };
-const _hoisted_7$c = ["src", "alt"];
-const _hoisted_8$b = ["innerHTML"];
-const _hoisted_9$b = {
+const _hoisted_6$c = ["src", "alt"];
+const _hoisted_7$c = ["innerHTML"];
+const _hoisted_8$b = {
   key: 1,
   class: "my-[44px]"
 };
-const _hoisted_10$8 = { class: "text-[36px] text-gray-900 font-semibold" };
-const _hoisted_11$7 = ["innerHTML"];
-const _hoisted_12$5 = {
+const _hoisted_9$b = { class: "text-[36px] text-gray-900 font-semibold" };
+const _hoisted_10$8 = ["innerHTML"];
+const _hoisted_11$7 = {
   key: 0,
   class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
 };
-const _hoisted_13$4 = { class: "font-semibold text-[20px] text-gray-900" };
-const _hoisted_14$4 = ["innerHTML"];
-const _hoisted_15$3 = ["href", "target"];
-const _hoisted_16$1 = ["src"];
-const _hoisted_17$1 = {
+const _hoisted_12$5 = { class: "font-semibold text-[20px] text-gray-900" };
+const _hoisted_13$4 = ["innerHTML"];
+const _hoisted_14$4 = ["href", "target"];
+const _hoisted_15$3 = ["src"];
+const _hoisted_16$1 = {
   key: 0,
   class: "w-[560px]"
 };
-const _hoisted_18$1 = ["src", "alt"];
+const _hoisted_17$1 = ["src", "alt"];
 const _sfc_main$d = {
   __name: "TwoColumnsImageContent",
   props: {
@@ -49085,6 +49081,7 @@ const _sfc_main$d = {
   setup(__props) {
     const props = __props;
     const section = ref(props.section);
+    const innerWidth = ref(window.innerWidth);
     const paragraphComponent = computed(() => {
       return section.value.components.find((component) => component.type === "paragraph");
     });
@@ -49113,39 +49110,43 @@ const _sfc_main$d = {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", _hoisted_1$q, [
         createElementVNode("div", _hoisted_2$c, [
-          paragraphComponent.value ? (openBlock(), createElementBlock("div", _hoisted_3$c, [
+          paragraphComponent.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "grid gap-1.5 lg:gap-4",
+            style: normalizeStyle(innerWidth.value >= 1024 ? "grid-template-columns: 33% auto;" : "")
+          }, [
             paragraphComponent.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["bg-gray-100 rounded-xl p-8", { "h-fit": (_a = section.value) == null ? void 0 : _a.minimum_height }])
             }, [
-              createElementVNode("h3", _hoisted_4$c, toDisplayString(paragraphComponent.value.title), 1),
+              createElementVNode("h3", _hoisted_3$c, toDisplayString(paragraphComponent.value.title), 1),
               createElementVNode("p", {
                 class: "text-md font-normal mt-2 text-gray-600 leading-6",
                 innerHTML: paragraphComponent.value.paragraph
-              }, null, 8, _hoisted_5$c)
+              }, null, 8, _hoisted_4$c)
             ], 2)) : createCommentVNode("", true),
-            imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_6$c, [
+            imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
               createElementVNode("img", {
                 src: imageComponent.value.featured_image,
                 alt: imageComponent.value.caption,
-                class: "lg:absolute inset-0 w-full h-full object-cover"
-              }, null, 8, _hoisted_7$c),
+                class: "w-full h-full object-cover"
+              }, null, 8, _hoisted_6$c),
               createElementVNode("p", {
                 innerHTML: imageComponent.value.caption,
                 class: "mt-2 text-[13px]"
-              }, null, 8, _hoisted_8$b)
+              }, null, 8, _hoisted_7$c)
             ])) : createCommentVNode("", true)
-          ])) : (openBlock(), createElementBlock("div", _hoisted_9$b, [
+          ], 4)) : (openBlock(), createElementBlock("div", _hoisted_8$b, [
             headerComponent.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
             }, [
-              createElementVNode("h3", _hoisted_10$8, toDisplayString(headerComponent.value.title), 1),
+              createElementVNode("h3", _hoisted_9$b, toDisplayString(headerComponent.value.title), 1),
               ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (openBlock(), createElementBlock("p", {
                 key: 0,
                 class: "text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]",
                 innerHTML: headerComponent.value.supporting_text
-              }, null, 8, _hoisted_11$7)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_10$8)) : createCommentVNode("", true)
             ], 2)) : createCommentVNode("", true),
             createElementVNode("div", {
               class: normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
@@ -49162,7 +49163,7 @@ const _sfc_main$d = {
                     }])
                   }, [
                     item.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_12$5, [
+                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_11$7, [
                         createVNode(_sfc_main$H, {
                           icon: item.icon,
                           "icon-classes": "w-5 h-5 text-brand-600"
@@ -49171,11 +49172,11 @@ const _sfc_main$d = {
                       createElementVNode("div", {
                         class: normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                       }, [
-                        createElementVNode("h3", _hoisted_13$4, toDisplayString(item.title), 1),
+                        createElementVNode("h3", _hoisted_12$5, toDisplayString(item.title), 1),
                         createElementVNode("p", {
                           class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                           innerHTML: item.supporting_text ?? item.description
-                        }, null, 8, _hoisted_14$4),
+                        }, null, 8, _hoisted_13$4),
                         ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (openBlock(), createElementBlock("a", {
                           key: 0,
                           class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49184,23 +49185,23 @@ const _sfc_main$d = {
                         }, [
                           createTextVNode(toDisplayString(item.primary_button.label) + " ", 1),
                           createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-                        ], 8, _hoisted_15$3)) : createCommentVNode("", true)
+                        ], 8, _hoisted_14$4)) : createCommentVNode("", true)
                       ], 2)
                     ], 64)) : (openBlock(), createElementBlock("img", {
                       key: 1,
                       src: item.image,
                       alt: "Feature Image",
                       class: "w-full h-full object-cover"
-                    }, null, 8, _hoisted_16$1))
+                    }, null, 8, _hoisted_15$3))
                   ], 2);
                 }), 256))
               ], 2),
-              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_17$1, [
+              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
                 createElementVNode("img", {
                   src: imageComponent.value.featured_image,
                   alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
                   class: "rounded-br-[24px] rounded-tl-[24px] w-full"
-                }, null, 8, _hoisted_18$1)
+                }, null, 8, _hoisted_17$1)
               ])) : createCommentVNode("", true)
             ], 2)
           ]))

package/dist/page-builder.umd.js

@@ -45239,7 +45239,7 @@ ${escapeText(this.code(index, length))}
   };
   const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_18$3 = { key: 2 };
+  const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
     props: {
@@ -45439,7 +45439,7 @@ ${escapeText(this.code(index, length))}
                         sites: _ctx.sites,
                         forms: __props.forms
                       }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : vue.createCommentVNode("", true)
-                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$3, [
+                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
                       vue.createVNode(_sfc_main$P, {
                         "is-vertical": "",
                         field: "image",
@@ -46176,7 +46176,7 @@ ${escapeText(this.code(index, length))}
   };
   const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
   const _hoisted_17$2 = ["value"];
-  const _hoisted_18$2 = {
+  const _hoisted_18$1 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
   };
@@ -46341,7 +46341,7 @@ ${escapeText(this.code(index, length))}
                   _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
                 ])
               ])) : vue.createCommentVNode("", true),
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [
                 vue.createVNode(Instructions)
               ])) : vue.createCommentVNode("", true),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(currentComponent.value), {
@@ -49046,37 +49046,33 @@ ${escapeText(this.code(index, length))}
   };
   const _hoisted_1$q = { class: "overflow-hidden" };
   const _hoisted_2$c = { class: "max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4" };
-  const _hoisted_3$c = {
-    key: 0,
-    class: "grid lg:grid-cols-[33%_auto] gap-1.5 lg:gap-4"
-  };
-  const _hoisted_4$c = { class: "text-[20px] text-gray-900 font-semibold" };
-  const _hoisted_5$c = ["innerHTML"];
-  const _hoisted_6$c = {
+  const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
+  const _hoisted_4$c = ["innerHTML"];
+  const _hoisted_5$c = {
     key: 1,
     class: "rounded-xl md:rounded-3xl overflow-hidden relative"
   };
-  const _hoisted_7$c = ["src", "alt"];
-  const _hoisted_8$b = ["innerHTML"];
-  const _hoisted_9$b = {
+  const _hoisted_6$c = ["src", "alt"];
+  const _hoisted_7$c = ["innerHTML"];
+  const _hoisted_8$b = {
     key: 1,
     class: "my-[44px]"
   };
-  const _hoisted_10$8 = { class: "text-[36px] text-gray-900 font-semibold" };
-  const _hoisted_11$7 = ["innerHTML"];
-  const _hoisted_12$5 = {
+  const _hoisted_9$b = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_10$8 = ["innerHTML"];
+  const _hoisted_11$7 = {
     key: 0,
     class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_13$4 = { class: "font-semibold text-[20px] text-gray-900" };
-  const _hoisted_14$4 = ["innerHTML"];
-  const _hoisted_15$3 = ["href", "target"];
-  const _hoisted_16$1 = ["src"];
-  const _hoisted_17$1 = {
+  const _hoisted_12$5 = { class: "font-semibold text-[20px] text-gray-900" };
+  const _hoisted_13$4 = ["innerHTML"];
+  const _hoisted_14$4 = ["href", "target"];
+  const _hoisted_15$3 = ["src"];
+  const _hoisted_16$1 = {
     key: 0,
     class: "w-[560px]"
   };
-  const _hoisted_18$1 = ["src", "alt"];
+  const _hoisted_17$1 = ["src", "alt"];
   const _sfc_main$d = {
     __name: "TwoColumnsImageContent",
     props: {
@@ -49088,6 +49084,7 @@ ${escapeText(this.code(index, length))}
     setup(__props) {
       const props = __props;
       const section = vue.ref(props.section);
+      const innerWidth = vue.ref(window.innerWidth);
       const paragraphComponent = vue.computed(() => {
         return section.value.components.find((component) => component.type === "paragraph");
       });
@@ -49116,39 +49113,43 @@ ${escapeText(this.code(index, length))}
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createElementVNode("div", _hoisted_2$c, [
-            paragraphComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$c, [
+            paragraphComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "grid gap-1.5 lg:gap-4",
+              style: vue.normalizeStyle(innerWidth.value >= 1024 ? "grid-template-columns: 33% auto;" : "")
+            }, [
               paragraphComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: vue.normalizeClass(["bg-gray-100 rounded-xl p-8", { "h-fit": (_a = section.value) == null ? void 0 : _a.minimum_height }])
               }, [
-                vue.createElementVNode("h3", _hoisted_4$c, vue.toDisplayString(paragraphComponent.value.title), 1),
+                vue.createElementVNode("h3", _hoisted_3$c, vue.toDisplayString(paragraphComponent.value.title), 1),
                 vue.createElementVNode("p", {
                   class: "text-md font-normal mt-2 text-gray-600 leading-6",
                   innerHTML: paragraphComponent.value.paragraph
-                }, null, 8, _hoisted_5$c)
+                }, null, 8, _hoisted_4$c)
               ], 2)) : vue.createCommentVNode("", true),
-              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$c, [
+              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, [
                 vue.createElementVNode("img", {
                   src: imageComponent.value.featured_image,
                   alt: imageComponent.value.caption,
-                  class: "lg:absolute inset-0 w-full h-full object-cover"
-                }, null, 8, _hoisted_7$c),
+                  class: "w-full h-full object-cover"
+                }, null, 8, _hoisted_6$c),
                 vue.createElementVNode("p", {
                   innerHTML: imageComponent.value.caption,
                   class: "mt-2 text-[13px]"
-                }, null, 8, _hoisted_8$b)
+                }, null, 8, _hoisted_7$c)
               ])) : vue.createCommentVNode("", true)
-            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$b, [
+            ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$b, [
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: vue.normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
               }, [
-                vue.createElementVNode("h3", _hoisted_10$8, vue.toDisplayString(headerComponent.value.title), 1),
+                vue.createElementVNode("h3", _hoisted_9$b, vue.toDisplayString(headerComponent.value.title), 1),
                 ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (vue.openBlock(), vue.createElementBlock("p", {
                   key: 0,
                   class: "text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]",
                   innerHTML: headerComponent.value.supporting_text
-                }, null, 8, _hoisted_11$7)) : vue.createCommentVNode("", true)
+                }, null, 8, _hoisted_10$8)) : vue.createCommentVNode("", true)
               ], 2)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
@@ -49165,7 +49166,7 @@ ${escapeText(this.code(index, length))}
                       }])
                     }, [
                       item.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$5, [
+                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$7, [
                           vue.createVNode(_sfc_main$H, {
                             icon: item.icon,
                             "icon-classes": "w-5 h-5 text-brand-600"
@@ -49174,11 +49175,11 @@ ${escapeText(this.code(index, length))}
                         vue.createElementVNode("div", {
                           class: vue.normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                         }, [
-                          vue.createElementVNode("h3", _hoisted_13$4, vue.toDisplayString(item.title), 1),
+                          vue.createElementVNode("h3", _hoisted_12$5, vue.toDisplayString(item.title), 1),
                           vue.createElementVNode("p", {
                             class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                             innerHTML: item.supporting_text ?? item.description
-                          }, null, 8, _hoisted_14$4),
+                          }, null, 8, _hoisted_13$4),
                           ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49187,23 +49188,23 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(item.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_15$3)) : vue.createCommentVNode("", true)
+                          ], 8, _hoisted_14$4)) : vue.createCommentVNode("", true)
                         ], 2)
                       ], 64)) : (vue.openBlock(), vue.createElementBlock("img", {
                         key: 1,
                         src: item.image,
                         alt: "Feature Image",
                         class: "w-full h-full object-cover"
-                      }, null, 8, _hoisted_16$1))
+                      }, null, 8, _hoisted_15$3))
                     ], 2);
                   }), 256))
                 ], 2),
-                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
+                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
                     class: "rounded-br-[24px] rounded-tl-[24px] w-full"
-                  }, null, 8, _hoisted_18$1)
+                  }, null, 8, _hoisted_17$1)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
             ]))

package/example/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"
@@ -18,7 +18,7 @@
   },
   "author": "",
   "license": "ISC",
-  "description": "This package provides functionality for a CMS like page builder in Laravel. This includes managing pages and their content.",
+  "description": "This package provides functionality for page builder in Laravel. This includes managing pages and their content.",
   "directories": {
     "example": "example"
   },

package/src/assets/css/style.css

@@ -105,6 +105,6 @@
         }
     }
     .ql-editor {
-        @apply p-0 overflow-visible;
+        @apply p-0 overflow-visible h-auto;
     }
 }

package/src/components/presenters/modules/Timeline.vue

@@ -9,7 +9,7 @@
         <div class="mt-4">
           <div v-for="(data, index) in timelineComponent.data" class="flex flex-row">
             <div class="w-1/5 mr-[40px] relative">
-              <h1 class=" text-[24px] font-semibold text-navy-800 pr-5">{{ data.title }}</h1>
+              <h1 class="text-[24px] font-semibold text-navy-800 pr-5">{{ data.title }}</h1>
               <div class="w-[32px] h-[32px] flex items-center justify-center border-2 border-navy-100 rounded-full absolute right-[-17px] bg-white top-0">
                 <p class="w-[16px] h-[16px] rounded-full bg-navy-600"></p>
               </div>

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="overflow-hidden">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4">
-      <div class="grid lg:grid-cols-[33%_auto] gap-1.5 lg:gap-4" v-if="paragraphComponent">
+      <div class="grid gap-1.5 lg:gap-4"
+           :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
+           v-if="paragraphComponent">
         <div class="bg-gray-100 rounded-xl p-8" :class="{'h-fit': section?.minimum_height}" v-if="paragraphComponent">
           <h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
           <p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
         </div>
         <div class="rounded-xl md:rounded-3xl overflow-hidden relative" v-if="imageComponent">
-          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="lg:absolute inset-0 w-full h-full object-cover"/>
+          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full h-full object-cover"/>
           <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
         </div>
       </div>
@@ -64,7 +66,7 @@
 
 <script setup>
 import IconComponent from "@/components/common/Icon.vue";
-import {ref, computed, onMounted} from "vue";
+import {ref, computed} from "vue";
 import {formatUrl} from "@/components/helpers/common";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import "quill/dist/quill.snow.css";
@@ -77,6 +79,7 @@ const props = defineProps({
 });
 
 const section = ref(props.section);
+const innerWidth = ref(window.innerWidth);
 const paragraphComponent = computed(() => {
   return section.value.components.find((component) => component.type === "paragraph");
 });