[Bug Fix] New Home Page Bug Fixes (Stirling-Tools#1973)

* Fix favorites section being cut off if it has too many items.

* Fix the group collapse transition animation playing on page load.

src/main/resources/static/css/home.css

@@ -62,12 +62,15 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
   gap: 30px 30px;
-  transition: 0.5s all;
   overflow: hidden;
   margin: -20px;
   padding: 20px;
 }
 
+.feature-group-container.animated-group {
+  transition: 0.5s all;
+}
+
 .feature-group.collapsed>.feature-group-container {
   max-height: 0 !important;
   margin: 0;

src/main/resources/static/js/homecard.js

@@ -24,6 +24,7 @@ function filterCards() {
 
 function updateFavoritesSection() {
   const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
+  favoritesContainer.style.maxHeight = "none";
   favoritesContainer.innerHTML = "";
   const cards = Array.from(document.querySelectorAll(".feature-card"));
   let favoritesAmount = 0;
@@ -40,6 +41,7 @@ function updateFavoritesSection() {
     document.getElementById("groupFavorites").style.display = "flex";
   };
   reorderCards(favoritesContainer);
+  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + "px";
 };
 
 function toggleFavorite(element) {
@@ -197,21 +199,31 @@ document.addEventListener("DOMContentLoaded", function () {
     const container = header.parentNode.querySelector(".feature-group-container");
     if (parent.id !== "groupFavorites") {
       container.style.maxHeight = container.clientHeight + "px";
-    } else {
-      container.style.maxHeight = "500px";
     }
     header.onclick = () => {
       expandCollapseToggle(parent);
     };
   })
 
   const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+  const groupsArray = Array.from(document.querySelectorAll(".feature-group"));
 
-  Array.from(document.querySelectorAll(".feature-group")).forEach(group => {
+  groupsArray.forEach(group => {
     if (collapsed.indexOf(group.id) !== -1) {
       expandCollapseToggle(group, false);
     }
   })
 
+  // Necessary in order to not fire the transition animation on page load, which looks wrong.
+  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
+  setTimeout(() => {
+    groupsArray.forEach(group => {
+      const container = group.querySelector(".feature-group-container");
+      container.classList.add("animated-group");
+    })
+  }, 500);
+
+
+
   showFavoritesOnly();
 });