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

* 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>

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)
+  })
+})

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>
     )
   }