fix: Remove race condition for resizing collaborations

js/src/collaborations/eclipsefdn.weighted-working-groups.js

@@ -15,7 +15,6 @@ import template from '../templates/weighted-working-groups/working-group-block.m
 
 const defaultOptions = {
     count: 1,
-    wrapperClass: ''
 }
 
 // Working groups with a weight of -1 will not be displayed.
@@ -109,16 +108,6 @@ async function getWeightedRandomWorkingGroups(count) {
     }
 };
 
-const matchHeightForLogos = (baseElement) => {
-    const imgElements = baseElement.querySelectorAll('.weighted-working-group-logo');
-
-    imgElements.forEach(el => {
-        el.addEventListener('load', () => {
-            $('.weighted-working-group-block-wrapper').matchHeight();
-        });
-    });
-}
-
 const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
     const fallbackLogo = fallbackLogos[alias];
     if (logo === '') return fallbackLogo || '';
@@ -136,7 +125,7 @@ const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
         count: +element.dataset.count
     };
 
-    element.innerHTML = template({ isFetching: true, items: new Array(options.count) , wrapperClass: options.wrapperClass })
+    element.innerHTML = template({ isFetching: true, items: new Array(options.count) })
 
     const [workingGroups, error] = await getWeightedRandomWorkingGroups(options.count);
 
@@ -148,7 +137,6 @@ const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
 
     const data = {
         isFetching: false,
-        wrapperClass: options.wrapperClass,
         items: workingGroups.map(wg => ({
             title: wg.title,
             logo: getWorkingGroupLogo(wg),
@@ -157,6 +145,4 @@ const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
     };
 
     element.innerHTML = template(data);
-    // @todo: Race condition $(...).matchHeight is not a function
-    //matchHeightForLogos(element)
-})();
+})();
\ No newline at end of file

js/src/templates/weighted-working-groups/working-group-block.mustache

 {{#items}}
-    <div class="weighted-working-group-block-wrapper match-height-item-by-row {{wrapperClass}}">
+    <div class="weighted-working-group-block-wrapper">
         {{#isFetching}}
             <div class="weighted-working-group-block weighted-working-group-loading" aria-label="Loading working group website links">
                 <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
@@ -14,4 +14,4 @@
             </a>
         {{/isFetching}}
     </div>
-{{/items}}
+{{/items}}
\ No newline at end of file

layouts/shortcodes/pages/collaborations/join-collaboration.html

 <section id="join-collaboration" class="container join-collaboration margin-bottom-60">
     <h2>Join a Collaboration</h2>
     <div class="row">
-        <div class="eclipsefdn-weighted-working-groups" data-wrapper-class="col-sm-8" data-count="3"></div>
+        <div class="eclipsefdn-weighted-working-groups" data-count="3"></div>
         <div class="col-xs-24 join-collaboration-button-col">
             <a class="btn btn-primary join-collaboration-button" href="/org/workinggroups/explore.php" tabindex="0">View All</a>
         </div>

less/page_css_file/collaborations/styles.less

@@ -201,7 +201,13 @@
 }
 
 // Join collaboration section
+.eclipsefdn-weighted-working-groups {
+  display: flex;
+  gap: 3rem;
+}
+
 .weighted-working-group-block-wrapper {
+  width: 100%;
   padding-bottom: 2em;
 }