From 42c4c5d586dec7478aaf2f8f99499a22727abd7e Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 15 Jan 2026 17:42:03 +0100
Subject: [PATCH] feat: add collapsible reference tables for sections with >5
 rows

- Tables with more than 5 rows now show first 5 with 'Show N more...' toggle
- Uses native <details>/<summary> for expand/collapse
- Keeps reference pages cleaner by reducing visual noise from long sections
- Box Model, Typography, Transitions now collapsed by default
---
 src/app.js   | 45 +++++++++++++++++++++++++++++++++++++++++++++
 src/main.css | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)

diff --git a/src/app.js b/src/app.js
index cb41462..15e4d2e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2061,6 +2061,8 @@ function showReferencePage(refId) {
 	// Load reference content
 	if (elements.referenceBody && referenceContent[activeRef]) {
 		elements.referenceBody.innerHTML = referenceContent[activeRef];
+		// Make large tables collapsible
+		makeTablesCollapsible();
 		// Highlight code blocks
 		highlightReferenceCodeBlocks();
 	} else if (elements.referenceBody) {
@@ -2068,6 +2070,49 @@ function showReferencePage(refId) {
 	}
 }
 
+/**
+ * Make reference tables with more than 5 rows collapsible
+ */
+function makeTablesCollapsible() {
+	const tables = elements.referenceBody?.querySelectorAll(".ref-table");
+	const ROW_LIMIT = 5;
+
+	tables?.forEach((table) => {
+		const tbody = table.querySelector("tbody");
+		if (!tbody) return;
+
+		const rows = Array.from(tbody.querySelectorAll("tr"));
+		if (rows.length <= ROW_LIMIT) return;
+
+		// Split rows: visible (first 5) and hidden (rest)
+		const visibleRows = rows.slice(0, ROW_LIMIT);
+		const hiddenRows = rows.slice(ROW_LIMIT);
+
+		// Create new tbody with only visible rows
+		tbody.innerHTML = "";
+		visibleRows.forEach((row) => tbody.appendChild(row));
+
+		// Create details/summary for hidden rows
+		const details = document.createElement("details");
+		details.className = "ref-table-more";
+
+		const summary = document.createElement("summary");
+		summary.textContent = `Show ${hiddenRows.length} more...`;
+		details.appendChild(summary);
+
+		// Create a wrapper table for hidden rows (same structure)
+		const hiddenTable = document.createElement("table");
+		hiddenTable.className = "ref-table ref-table-continuation";
+		const hiddenTbody = document.createElement("tbody");
+		hiddenRows.forEach((row) => hiddenTbody.appendChild(row));
+		hiddenTable.appendChild(hiddenTbody);
+		details.appendChild(hiddenTable);
+
+		// Insert after the original table
+		table.parentNode.insertBefore(details, table.nextSibling);
+	});
+}
+
 /**
  * Highlight code blocks in reference pages with CodeMirror
  */
diff --git a/src/main.css b/src/main.css
index 4684dbe..83111ec 100644
--- a/src/main.css
+++ b/src/main.css
@@ -2263,6 +2263,40 @@ input:checked + .toggle-slider::before {
 	color: var(--primary-dark);
 }
 
+/* Collapsible table rows */
+.ref-table-more {
+	margin-top: -1px;
+}
+
+.ref-table-more summary {
+	padding: var(--spacing-sm) var(--spacing-md);
+	background: var(--hover-bg);
+	cursor: pointer;
+	font-size: 0.85rem;
+	color: var(--light-text);
+	border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+	list-style: none;
+	text-align: center;
+}
+
+.ref-table-more summary::-webkit-details-marker {
+	display: none;
+}
+
+.ref-table-more summary:hover {
+	background: var(--border-color);
+	color: var(--text-color);
+}
+
+.ref-table-more[open] summary {
+	border-radius: 0;
+}
+
+.ref-table-continuation {
+	border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+	margin-top: 0;
+}
+
 .ref-list {
 	background: var(--panel-bg);
 	border-radius: var(--border-radius-md);