From 7c05c8c72e0b0aae83a77cff58f6cc797ff9b19a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=99=B8=EA=B3=84=EA=B3=B5=EB=A3=A1?=
 <56211193+chucoding@users.noreply.github.com>
Date: Mon, 10 Aug 2026 08:35:39 +0900
Subject: [PATCH] fix(repo-icon): center emoji glyph within its sized icon box
 (#12057)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(repo-icon): center emoji glyph within its sized icon box

The emoji glyph span in RepoIconGlyph received a fixed-size box via
iconClassName but had no self-centering, so the outer flex only
centered the box itself while the glyph sat top-left inside it —
most visible in the settings preview (size-10 box, size-5 icon).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ewCWxSox2WHN8T78AT7T4

* test(repo-icon): cover emoji centering in its sized icon box

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
---
 .../repo/repo-icon.emoji-centering.test.tsx   | 39 +++++++++++++++++++
 .../src/components/repo/repo-icon.tsx         |  4 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/components/repo/repo-icon.emoji-centering.test.tsx

diff --git a/src/renderer/src/components/repo/repo-icon.emoji-centering.test.tsx b/src/renderer/src/components/repo/repo-icon.emoji-centering.test.tsx
new file mode 100644
index 000000000..314e37ead
--- /dev/null
+++ b/src/renderer/src/components/repo/repo-icon.emoji-centering.test.tsx
@@ -0,0 +1,39 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { RepoIconGlyph } from './repo-icon'
+
+afterEach(() => {
+  cleanup()
+})
+
+// Every RepoIconGlyph call site passes a fixed `size-*` in iconClassName, so the
+// span carrying it is a sized box holding a bare text node. The image branch
+// (`size-full object-contain`) and the lucide branch (the svg fills its own box)
+// centre structurally; only the emoji branch has to ask for it.
+describe('RepoIconGlyph emoji centering', () => {
+  it('centers the glyph inside the box iconClassName sizes', () => {
+    const { container } = render(
+      <RepoIconGlyph
+        repoIcon={{ type: 'emoji', emoji: '🐙' }}
+        className="size-10"
+        iconClassName="size-5"
+      />
+    )
+
+    const glyphBox = container.querySelector('.size-5')
+    expect(glyphBox?.textContent).toBe('🐙')
+    expect(glyphBox?.className).toContain('inline-flex')
+    expect(glyphBox?.className).toContain('items-center')
+    expect(glyphBox?.className).toContain('justify-center')
+  })
+
+  it('renders the glyph as the only child so justify-center has one flex item', () => {
+    const { container } = render(
+      <RepoIconGlyph repoIcon={{ type: 'emoji', emoji: '🐙' }} iconClassName="size-5" />
+    )
+
+    // Stray JSX whitespace would become a second anonymous flex item and shift the glyph.
+    expect(container.querySelector('.size-5')?.childNodes).toHaveLength(1)
+  })
+})
diff --git a/src/renderer/src/components/repo/repo-icon.tsx b/src/renderer/src/components/repo/repo-icon.tsx
index d109200d4..fb690b211 100644
--- a/src/renderer/src/components/repo/repo-icon.tsx
+++ b/src/renderer/src/components/repo/repo-icon.tsx
@@ -166,7 +166,9 @@ export function RepoIconGlyph({
         className={cn('inline-flex items-center justify-center leading-none', className)}
         aria-hidden="true"
       >
-        <span className={cn('text-[0.9em]', iconClassName)}>{repoIcon.emoji}</span>
+        <span className={cn('inline-flex items-center justify-center text-[0.9em]', iconClassName)}>
+          {repoIcon.emoji}
+        </span>
       </span>
     )
   }