From bd20ae90291f462510e7dc3b37ca92ac86368635 Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <ethan.a.obrien@gmail.com>
Date: Thu, 5 Jun 2025 12:14:38 -0500
Subject: [PATCH] Cleanup consistency with about menu tabs

---
 data/emulator.css    | 17 +++++++++++++++--
 data/src/emulator.js | 36 ++++++++++++++++++++----------------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/data/emulator.css b/data/emulator.css
index a0f4e2c..c52396a 100644
--- a/data/emulator.css
+++ b/data/emulator.css
@@ -256,6 +256,7 @@
     text-align: center;
     width: 100%;
     padding: 10px;
+    overflow-wrap: anywhere;
 }
 
 .ejs_list_selector {
@@ -280,7 +281,7 @@
 }
 
 .ejs_list_selector li a {
-    color: #999 !important;
+    color: #999;
     display: block;
     font-size: 13px;
 }
@@ -305,6 +306,18 @@
     color: #fff !important;
 }
 
+.ejs_active_list_element {
+    background: rgba(var(--ejs-primary-color), 1);
+    border-radius: 4px;
+    box-shadow: 0 0 0 5px rgba(var(--ejs-primary-color), 0.25);
+    outline: 0;
+    color: #fff !important;
+}
+
+.ejs_active_list_element a {
+    color: #fff !important;
+}
+
 .ejs_svg_rotate {
     transform: rotate(90deg);
 }
@@ -552,7 +565,7 @@
 .ejs_popup_container *::after,
 .ejs_popup_container *::before {
     box-sizing: border-box;
-    color: #bcbcbc !important;
+    color: #bcbcbc;
 
     -webkit-user-select: none;
     -moz-user-select: none;
diff --git a/data/src/emulator.js b/data/src/emulator.js
index 26029aa..fa98fdf 100644
--- a/data/src/emulator.js
+++ b/data/src/emulator.js
@@ -1485,7 +1485,7 @@ class EmulatorJS {
                 if (functi0n instanceof Function) {
                     this.addEventListener(li, 'click', (e) => {
                         e.preventDefault();
-                        functi0n();
+                        functi0n(li);
                     });
                 }
                 a.href = "#";
@@ -1509,7 +1509,6 @@ class EmulatorJS {
             body.appendChild(retroarch);
             body.appendChild(coreLicense);
 
-            let current = home;
             home.innerText = "EmulatorJS v" + this.ejs_version;
             home.appendChild(this.createElement("br"));
             home.appendChild(this.createElement("br"));
@@ -1517,6 +1516,7 @@ class EmulatorJS {
             home.classList.add("ejs_context_menu_tab");
             license.classList.add("ejs_context_menu_tab");
             retroarch.classList.add("ejs_context_menu_tab");
+            coreLicense.classList.add("ejs_context_menu_tab");
 
             this.createLink(home, "https://github.com/EmulatorJS/EmulatorJS", "View on GitHub", true);
 
@@ -1540,29 +1540,33 @@ class EmulatorJS {
 
             home.appendChild(this.createElement("br"));
             menu.appendChild(parent);
-            const setElem = (element) => {
+            let current = home;
+            const setElem = (element, li) => {
                 if (current === element) return;
                 if (current) {
                     current.style.display = "none";
                 }
+                let activeLi = li.parentElement.querySelector(".ejs_active_list_element");
+                if (activeLi) {
+                    activeLi.classList.remove("ejs_active_list_element");
+                }
+                li.classList.add("ejs_active_list_element");
                 current = element;
                 element.style.display = "";
             }
-            addButton("Home", false, () => {
-                setElem(home);
-            })
-            addButton("EmulatorJS License", false, () => {
-                setElem(license);
-            })
-            addButton("RetroArch License", false, () => {
-                setElem(retroarch);
-            })
+            addButton("Home", false, (li) => {
+                setElem(home, li);
+            }).classList.add("ejs_active_list_element");
+            addButton("EmulatorJS License", false, (li) => {
+                setElem(license, li);
+            });
+            addButton("RetroArch License", false, (li) => {
+                setElem(retroarch, li);
+            });
             if (this.coreName && this.license) {
-                addButton(this.coreName + " License", false, () => {
-                    setElem(coreLicense);
+                addButton(this.coreName + " License", false, (li) => {
+                    setElem(coreLicense, li);
                 })
-                coreLicense.style['text-align'] = "center";
-                coreLicense.style['padding'] = "10px";
                 coreLicense.innerText = this.license;
             }
             //Todo - Contributors.