add budget-summary_content_header.js file

decidim-budgets/app/packs/entrypoints/decidim_budgets.js

@@ -1,6 +1,7 @@
 import "src/decidim/budgets/projects"
 import "src/decidim/budgets/progressFixed"
 import "src/decidim/budgets/exit_handler"
+import "src/decidim/budgets/budget_summary_content_header"
 
 // Images
 require.context("../images", true)

decidim-budgets/app/packs/src/decidim/budgets/budget_summary_content_header.js

@@ -0,0 +1,27 @@
+// This script aims to dynamically adjust the height of the .budget-summary__content element based on the heights of two of its child elements,
+// but only when .budget-summary__content__header is within the viewport.
+const isElementInViewport = (el) => {
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const budgetSummaryContentHeader = document.querySelector(".budget-summary__content__header");
+
+  if (budgetSummaryContentHeader) {
+    if (isElementInViewport(budgetSummaryContentHeader)) {
+      const budgetSummaryContent = document.querySelector(".budget-summary__content");
+      const budgetSummaryProgressbox = document.querySelector(".budget-summary__progressbox");
+      const budgetSummaryContentHeaderDescription = document.querySelector(".budget-summary__content__header--description");
+
+      if (budgetSummaryContent) {
+        budgetSummaryContent.style.height = `${budgetSummaryProgressbox.offsetHeight + budgetSummaryContentHeaderDescription.offsetHeight}px`;
+      }
+    }
+  }
+});

decidim-budgets/app/packs/stylesheets/budgets.scss

@@ -17,7 +17,7 @@
     }
 
     &__content__header {
-      @apply col-span-2 text-2xl mb-2;
+      @apply col-span-2 text-2xl pb-2 mb-2;
 
       .ql-editor {
         @apply inline-block text-2xl;