From 5985f172a1922aff78b9e981515ca81a1d48dfeb Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Mon, 18 May 2026 12:29:25 +0200
Subject: [PATCH] fixed editor buttons

---
 .../src/components/react/admin/Editor.tsx     |  7 +++---
 frontend/src/styles/partials/50-controls.css  | 25 +++++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/react/admin/Editor.tsx b/frontend/src/components/react/admin/Editor.tsx
index 07254db..779993a 100644
--- a/frontend/src/components/react/admin/Editor.tsx
+++ b/frontend/src/components/react/admin/Editor.tsx
@@ -291,10 +291,11 @@ export default function Editor({ editSlug }: Props) {
             <button
               type="button"
               onClick={() => setVimEnabled(v => !v)}
-              className={`btn btn--ghost btn--sm${vimEnabled ? ' is-active' : ''}`}
-              title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'}
+              className={`btn btn--ghost btn--sm vim-toggle${vimEnabled ? ' is-active' : ''}`}
+              aria-pressed={vimEnabled}
+              title={vimEnabled ? 'Vim mode ON — click to disable' : 'Vim mode OFF — click to enable'}
             >
-              {vimEnabled ? 'VIM' : 'vim'}
+              {vimEnabled ? 'Vim on' : 'Vim off'}
             </button>
             <button
               type="button"
diff --git a/frontend/src/styles/partials/50-controls.css b/frontend/src/styles/partials/50-controls.css
index 6341b52..302d705 100644
--- a/frontend/src/styles/partials/50-controls.css
+++ b/frontend/src/styles/partials/50-controls.css
@@ -75,11 +75,26 @@
   background: var(--red);
   border-color: var(--red);
 }
-/* Pressed/selected state for toggle & tab buttons */
-.btn.is-active {
-  color: var(--mauve);
-  border-color: color-mix(in srgb, var(--mauve) 55%, var(--surface2));
-  background: color-mix(in srgb, var(--mauve) 14%, transparent);
+/* Pressed/selected state for toggle & tab buttons. Solid accent fill so an
+ * engaged toggle is unmistakable (label alone is too subtle). The
+ * `.btn--ghost.is-active` selector carries enough specificity (0,3,0) to beat
+ * the theme `.cybersigil/.breakcore .btn--ghost` rules (0,2,0) that load in
+ * later partials — without it the active state is invisible on those themes. */
+.btn.is-active,
+.btn.btn--ghost.is-active {
+  color: var(--rosewater);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--crust) 35%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent);
+}
+
+/* The vim toggle is desktop-only — vim mode auto-disables below 768px, so the
+ * button is a no-op there. Unlayered media query (Tailwind `hidden` would
+ * lose the cascade to `.btn { display: inline-flex }`). */
+@media (max-width: 767px) {
+  .btn.vim-toggle { display: none !important; }
 }
 
 /* Sizes */