From f9cb96f97157813b71949fd4909b49c4b0b29d92 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller@mokoconsulting.tech>
Date: Tue, 21 Jul 2026 17:23:37 -0500
Subject: [PATCH] =?UTF-8?q?fix(theme):=20readable=20active=20tab=20(mokoon?=
 =?UTF-8?q?yx=C3=97Fomantic)=20+=20mobile=20footer=20realign=20(#822=20#71?=
 =?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MokoOnyx template.css's Bootstrap `.active` clobbered Fomantic's active menu item to
  white-on-white (dashboard Repository/Organization switcher). Restore a readable selected
  state via theme vars.
- Mobile: stack + center the footer's left/right link groups so they don't misalign.

Authored-by: Moko Consulting
Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P
---
 web_src/css/mokogit-brand.css  | 14 ++++++++++++++
 web_src/css/mokogit-mobile.css | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/web_src/css/mokogit-brand.css b/web_src/css/mokogit-brand.css
index 486b9094a9..063884c16c 100644
--- a/web_src/css/mokogit-brand.css
+++ b/web_src/css/mokogit-brand.css
@@ -252,3 +252,17 @@ nav#navbar {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px var(--color-primary-alpha-40);
 }
+
+/* ── MokoOnyx (Bootstrap template.css) × Fomantic collision fixes ──────────────
+   template.css loads after the Fomantic bundle to drive the look, but Bootstrap's
+   generic classes clobber some Fomantic components. Restore the readable ones here. */
+
+/* Bootstrap `.active` turned Fomantic's active menu item white-on-white (e.g. the
+   dashboard Repository/Organization switcher). Restore a readable selected state. */
+.ui.menu .item.active,
+.ui.two.item.menu .item.active,
+.ui.tabular.menu .item.active,
+.ui.secondary.pointing.menu .item.active {
+  background: var(--color-box-header) !important;
+  color: var(--color-text) !important;
+}
diff --git a/web_src/css/mokogit-mobile.css b/web_src/css/mokogit-mobile.css
index 74e0438a42..f2c75d76ca 100644
--- a/web_src/css/mokogit-mobile.css
+++ b/web_src/css/mokogit-mobile.css
@@ -413,3 +413,19 @@
     min-height: var(--mg-touch-target);
   }
 }
+
+/* Footer: stack + center the two link groups on mobile so they don't misalign/overflow. */
+@media (max-width: 767.98px) {
+  .page-footer {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    text-align: center;
+  }
+  .page-footer .left-links,
+  .page-footer .right-links {
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.75rem;
+  }
+}
-- 
2.52.0