fix: tier header size in exported html for long labels

3 files changed, 39 insertions, 14 deletions

diff --git a/index.js b/index.js
index 6716003..c5d07a2 100644
--- a/index.js
+++ b/index.js
@@ -322,10 +322,6 @@ async function save_tierlist_with_template(filename) {
         // Inject the EMBEDDED_JSON inside a script tag
         let jsonScript = `<script>
             const EMBEDDED_JSON = ${JSON.stringify(serialized_tierlist, null, 4)};
-            window.addEventListener('load', () => {
-                hard_reset_list();
-                load_tierlist(EMBEDDED_JSON);
-            });
         </script>`;
 
         let inlineScript = `<script>\n${scriptContent}\n</script>`;
diff --git a/tiers.css b/tiers.css
index c2e9fca..8645269 100644
--- a/tiers.css
+++ b/tiers.css
@@ -15,7 +15,7 @@ body {
 
 .title label {
 	cursor: default;
-    
+
 }
 
 .main-content {
@@ -57,12 +57,13 @@ body {
 span.header {
     justify-content: center;
     color: black;
-    width: 100px; 
-    padding: 0;
+    width: 100px;
+    padding: 0 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    white-space: nowrap;
 }
 
 span.items {
@@ -70,7 +71,7 @@ span.items {
     flex-wrap: wrap;
     justify-content: left;
     flex-grow: 1;
-    height: 100%; 
+    height: 100%;
 }
 
 .tierlist div.row:last-child {
@@ -158,18 +159,18 @@ img:hover {
 	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
 	width: 90%;
 	max-width: 800px;
-	max-height: 90vh; 
+	max-height: 90vh;
 	text-align: center;
 	color: #ddd;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	overflow-y: auto;  
+	overflow-y: auto;
 }
 
 #modal-img {
 	max-width: 100%;
-	max-height: 40vh; 
+	max-height: 40vh;
 	object-fit: contain;
 	border-radius: 5px;
 	margin-bottom: 10px;
@@ -193,7 +194,7 @@ img:hover {
 
 #modal-description {
 	height: 25vh;
-	resize: none; 
+	resize: none;
 	text-align: left;
 }
 
@@ -202,7 +203,6 @@ img:hover {
 	display: none !important;
 }
 
-/* ...existing code... */
 
 /* Add these media queries at the end of the file */
 @media screen and (max-width: 768px) {
@@ -285,4 +285,4 @@ img:hover {
     img {
         max-height: 50px;
     }
-}
\ No newline at end of file
+}
diff --git a/tiers.js b/tiers.js
index 3653992..c33e632 100644
--- a/tiers.js
+++ b/tiers.js
@@ -108,9 +108,38 @@ function load_tierlist(serialized_tierlist) {
 
 		elem.querySelector('.header').innerText = ser_row.name;
 	}
+
+	resize_headers();
 	recompute_header_colors();
 }
 
+function resize_headers() {
+	let headers = tierlist_div.querySelectorAll('.row .header');
+	if (headers.length === 0) return;
+
+	let max_width = 100;
+	let reference_style = window.getComputedStyle(headers[0]);
+	let measurer = document.createElement('span');
+	measurer.style.position = 'absolute';
+	measurer.style.visibility = 'hidden';
+	measurer.style.whiteSpace = 'nowrap';
+	measurer.style.fontFamily = reference_style.fontFamily;
+	measurer.style.fontSize = reference_style.fontSize;
+	measurer.style.fontWeight = reference_style.fontWeight;
+	document.body.appendChild(measurer);
+
+	headers.forEach((header) => {
+		measurer.innerText = header.innerText;
+		let text_width = Math.ceil(measurer.getBoundingClientRect().width);
+		max_width = Math.max(max_width, text_width + 24);
+	});
+
+	document.body.removeChild(measurer);
+	headers.forEach((header) => {
+		header.style.minWidth = `${max_width}px`;
+	});
+}
+
 function add_row(index, name) {
 	let div = document.createElement('div');
 	div.classList.add('row');