dont use style prop

Author: KianNH

src/pages/changelog/index.astro

@@ -47,15 +47,14 @@ const props = {
 
 			return (
 				<div
-					class="mt-0! sm:flex"
+					class:list={["mt-0! sm:flex", { "hidden!": idx >= 10 }]}
 					data-products={JSON.stringify(
 						productIds.concat(
 							productGroups.map((group) =>
 								group.replaceAll(" ", "-").toLowerCase(),
 							),
 						),
 					)}
-					style={`display: ${idx >= 10 ? "none" : ""}`}
 				>
 					<time
 						datetime={entry.data.date.toISOString()}
@@ -131,11 +130,12 @@ const props = {
 			...document.querySelectorAll<HTMLElement>("[data-products]"),
 		]
 			.filter(
-				(e) => e.style.display === "none" && filterByProduct(e, filter!.value),
+				(e) =>
+					e.classList.contains("hidden!") && filterByProduct(e, filter!.value),
 			)
 			.slice(0, 10);
 
-		hidden.forEach((e) => (e.style.display = ""));
+		hidden.forEach((e) => e.classList.remove("hidden!"));
 
 		hideButton();
 	});
@@ -157,9 +157,9 @@ const props = {
 			const show = filtered.includes(entry);
 
 			if (show) {
-				entry.style.display = "";
+				entry.classList.remove("hidden!");
 			} else {
-				entry.style.display = "none";
+				entry.classList.add("hidden!");
 			}
 		}
 
@@ -185,13 +185,13 @@ const props = {
 
 		const filtered = entries.filter((p) => filterByProduct(p, filter!.value));
 
-		const visible = filtered.filter((p) => p.style.display !== "none");
+		const visible = filtered.filter((p) => !p.classList.contains("hidden!"));
 		const hidden = filtered.length - visible.length;
 
 		if (hidden > 0) {
-			button!.style.display = "";
+			button!.classList.remove("hidden!");
 		} else {
-			button!.style.display = "none";
+			button!.classList.add("hidden!");
 		}
 	}
 </script>