From b40c94ca64b1078284dfdff37c26494ca594c494 Mon Sep 17 00:00:00 2001
From: pekth <5535435+pekth@users.noreply.github.com>
Date: Sat, 17 Oct 2026 23:59:30 -0400
Subject: [PATCH] fix: center Grok provider marks
---
CHANGELOG.md | 5 +++++
docs/KB.md | 4 ++++
src/renderer/app.tsx | 2 +-
src/renderer/style.css | 2 ++
4 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c39c1bc..826c6c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ follows [Semantic Versioning](https://semver.org/).
## [Unreleased]
+### Fixed
+
+- Optically center the Grok mark in provider rings, menu items, cards and
+ Settings. Preserve the original provider artwork and existing icon sizes.
+
## [0.3.0-beta.3] - 2026-10-17
### Release
diff --git a/docs/KB.md b/docs/KB.md
index 7fb59d5..e591734 100644
--- a/docs/KB.md
+++ b/docs/KB.md
@@ -236,6 +236,10 @@ Release documentation refresh: 2026-10-17; build 61 executable inputs are unchan
synthetic proof do not establish live availability or universal cloud,
device or product coverage. See [ADR 0022](adr/0022-codex-account-token-history.md).
+- Electron provider marks share one renderer. The Grok mask has a one-pixel
+ optical offset to balance its right-heavy artwork at both icon sizes. The
+ original logo files, ring centers and notch geometry stay unchanged.
+
## Verification gaps
- The Electron candidate still needs native GUI launch/relaunch, preferences/account/offline journeys, tray/focus/accessibility, notification/login/share/updater paths, drag/display persistence and two different-height notch captures. Verified packaging and headless JSON cannot close migration or cutover.
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 90cd45e..32dd194 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -22,7 +22,7 @@ function Mark({ slot, state }: { slot: Slot; state: ViewState }) {
const id = useId();
const status = extract(state.snapshot.statuses[slot.provider])?.severity;
const tint = status === undefined || status === "operational" ? colours[slot.provider] : status === "degraded" ? "var(--warn)" : status === "unknown" ? "var(--muted)" : "var(--alert)";
- if (logos[slot.provider]) return ;
+ if (logos[slot.provider]) return ;
if (slot.provider === "claude") return ;
return ;
}
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 59ddeb0..55ad303 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -13,6 +13,8 @@
.surface-flyout, .surface-settings { display: flow-root; }
@media (prefers-color-scheme: dark) { .theme-system { --grok: #ebebf0; --claude: #d97706; --antigravity: #60a5fa; --opencode: #2dd4bf; --openrouter: #a78bfa; --canvas: #1c1c1e; --surface: #262629; --well: #343438; --border: #ffffff19; --text: #efeff2; --muted: #b0b0b8; --good: #30d158; --warn: #ffb340; --alert: #ff6961; } }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .secondary { color: var(--muted); font-size: 11px; } .stale { font-size: 11px; color: var(--warn); margin: 8px 0; } .empty { padding: 20px; color: var(--muted); } .badge { color: var(--muted); background: var(--well); padding: 2px 6px; border-radius: 5px; font-size: 10px; } .app-header { margin-bottom: 12px; flex-wrap: wrap; } .header-actions { display: flex; flex-wrap: wrap; gap: 6px; } .app-header small { color: var(--warn); font-size: 11px; font-weight: 400; } .flyout { padding: 14px; } .provider-card { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 10px; } .provider-heading { display: flex; align-items: center; gap: 7px; min-width: 0; } .provider-heading h2 { overflow-wrap: anywhere; } .mark { flex-shrink: 0; width: 16px; height: 16px; display: inline-block; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .pending-symbol { text-align: center; font-weight: 650; } .status { margin: 5px 0; } .quota-window { margin: 10px 0; } .meter { background: var(--well); height: 5px; border-radius: 4px; overflow: hidden; margin: 5px 0; } .meter span { display: block; height: 100%; border-radius: inherit; } .quota-window .secondary { align-items: flex-start; } .quota-window .secondary > :last-child { text-align: right; } .well { background: var(--well); padding: 8px; border-radius: 6px; } .credit { margin: 10px 0; } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0; } dt { font-size: 10px; color: var(--muted); } dd { font-size: 13px; margin: 0; } .sparkline { width: 100%; height: 45px; margin: 6px 0; } .heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 8px 0; } .heatmap > span { aspect-ratio: 1; border-radius: 2px; } .session { padding: 7px 0; border-bottom: 1px solid var(--border); } .session span { overflow-wrap: anywhere; } summary { color: var(--muted); font-size: 11px; cursor: pointer; padding-top: 8px; } .reset-credit { padding: 6px 0; } footer { margin-top: 12px; }
+/* Balance Grok's right-heavy artwork within the shared icon layout. */
+.mark[data-provider="grok"] { transform: translate(-1px, -1px); }
.provider-setting { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.settings { padding: 16px; max-width: 760px; margin: auto; font-size: 13px; }
.settings .settings-header { margin-bottom: 14px; }