From a1e5cd2f4a89cb135036e90f063bd56e4512d107 Mon Sep 17 00:00:00 2001
From: jae <jae@jaeswift.xyz>
Date: Tue, 31 Mar 2026 23:13:42 +0000
Subject: [PATCH] fix: admin panel showSection ID mismatch + missing
 main-content CSS

---
 css/admin.css | 10 ++++++++++
 js/admin.js   |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/css/admin.css b/css/admin.css
index 4355b88..4ee4998 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -169,6 +169,16 @@ body {
     min-height: 100vh;
 }
 
+/* ─── Main Content ─── */
+.main-content {
+    grid-column: 2;
+    grid-row: 2;
+    padding: 2rem;
+    overflow-y: auto;
+    max-height: calc(100vh - var(--topbar-h));
+    background: var(--bg);
+}
+
 /* ─── Top Bar ─── */
 .admin-topbar {
     grid-column: 1 / -1;
diff --git a/js/admin.js b/js/admin.js
index 558049b..4a9faed 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -182,6 +182,9 @@ const AdminApp = {
     /* ─────────────────────── NAVIGATION ─────────────────────── */
 
     showSection(name) {
+        // Normalize: ensure name has section- prefix
+        if (!name.startsWith('section-')) name = 'section-' + name;
+
         // Hide all sections
         document.querySelectorAll('[id^="section-"]').forEach(s => {
             s.style.display = 'none';
@@ -196,7 +199,8 @@ const AdminApp = {
         document.querySelectorAll('.sidebar a, .sidebar .nav-link').forEach(a => {
             a.classList.remove('active');
         });
-        const activeLink = document.querySelector(`[onclick*="'${name}'"]`);
+        const shortName = name.replace('section-', '');
+        const activeLink = document.querySelector(`.sidebar-link[data-section="${shortName}"]`);
         if (activeLink) activeLink.classList.add('active');
 
         // Update topbar title