From 3a23f7909592067d0cbaa85c32407130f0bb71f8 Mon Sep 17 00:00:00 2001
From: Konrad Paluszek <kezsulap@gmail.com>
Date: Thu, 21 Nov 2024 14:40:27 +0100
Subject: [PATCH] Automatically adjustu topmenu alignment

---
 resources/bridge-bidding-styl-v13.css |  5 +++--
 resources/main.js                     |  2 ++
 resources/parse-v13.js                | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/resources/bridge-bidding-styl-v13.css b/resources/bridge-bidding-styl-v13.css
index 4b96dab..39748df 100644
--- a/resources/bridge-bidding-styl-v13.css
+++ b/resources/bridge-bidding-styl-v13.css
@@ -13,6 +13,9 @@ table {
 td {
 	font-size: 1em;
 }
+#topmenulist {
+	display: grid;
+}
 .bidding {
 	padding-left: 0.4em;
 	border-radius: 5px;
@@ -117,10 +120,8 @@ ul.topmenu li {
 	margin: 2px;
 	padding: 0;
 	border-radius: 5px;
-	min-width: 50px;
 	height: 1.25em;
 	text-align: center;
-	width: min-content;
 }
 a.topmenu {
 	display: block;
diff --git a/resources/main.js b/resources/main.js
index ad48719..c818efa 100644
--- a/resources/main.js
+++ b/resources/main.js
@@ -26,6 +26,8 @@ function init() {
 		catch (e) {
 			display_error(e);
 		}
+		align_topmenu();
+		addEventListener("resize", (event) => {align_topmenu()});
 	})
 }
 init();
diff --git a/resources/parse-v13.js b/resources/parse-v13.js
index df125d7..d890343 100644
--- a/resources/parse-v13.js
+++ b/resources/parse-v13.js
@@ -1006,3 +1006,21 @@ function get_versions() {
 	if (owner === undefined) {owner = 'kezsulap', repo = 'SSO_MAX_CC'} //Uncomment for local testing of web related features
 	return [owner, repo, params_list]
 }
+function doesOverflowVertically(el) {
+	let curOverflow = el.style.overflow;
+	if (!curOverflow || curOverflow === "visible")
+		el.style.overflow = "hidden";
+	let isOverflowing = el.clientWidth < el.scrollWidth;
+	el.style.overflow = curOverflow;
+	return isOverflowing;
+}
+function align_topmenu() {
+	let topmenu = document.querySelector('#topmenulist');
+	let all_answers = topmenu.children;
+	for (let i = all_answers.length; i >= 1; --i) {
+		document.querySelector('#topmenulist').style.gridTemplateColumns = 'repeat(' + i + ', ' + (100 / i - 0.00001) + '%)';
+		let any_overflow = false;
+		for (let x of all_answers) if (doesOverflowVertically(x)) any_overflow = true;
+		if (!any_overflow) break;
+	}
+}