From 98daeca3343510e52ae52d55d421add0121e9e09 Mon Sep 17 00:00:00 2001
From: Mega Mind <146339422+M3gA-Mind@users.noreply.github.com>
Date: Wed, 24 Jun 2026 00:16:20 +0530
Subject: [PATCH] fix(chat): pad model-selector pill so the chevron isn't
 clipped (#3292) (#3977)

---
 app/src/components/chat/ModelQualityPill.tsx         |  7 +++++--
 .../chat/__tests__/ModelQualityPill.test.tsx         | 12 ++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/src/components/chat/ModelQualityPill.tsx b/app/src/components/chat/ModelQualityPill.tsx
index 53e511109..1a9391a02 100644
--- a/app/src/components/chat/ModelQualityPill.tsx
+++ b/app/src/components/chat/ModelQualityPill.tsx
@@ -18,12 +18,15 @@ export default function ModelQualityPill({ className }: ModelQualityPillProps) {
       aria-label={t('composer.modelSelector')}
       title={t('composer.modelSelector')}
       disabled
-      className={`flex items-center gap-1 text-xs text-stone-400 dark:text-neutral-500 disabled:cursor-default disabled:opacity-100 select-none ${className ?? ''}`}>
+      className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-xs text-stone-400 dark:text-neutral-500 disabled:cursor-default disabled:opacity-100 select-none ${className ?? ''}`}>
       <span>OpenHuman</span>
       <span className="text-stone-300 dark:text-neutral-600">·</span>
       <span>{t('composer.qualityHigh')}</span>
+      {/* `shrink-0` keeps the chevron from being squeezed, and the button's
+          `px-2` gives it trailing padding so the glyph is never clipped against
+          the rounded pill edge (#3292). */}
       <svg
-        className="w-3 h-3 ml-0.5"
+        className="w-3 h-3 ml-0.5 shrink-0"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
diff --git a/app/src/components/chat/__tests__/ModelQualityPill.test.tsx b/app/src/components/chat/__tests__/ModelQualityPill.test.tsx
index 40f318401..5d9c38f43 100644
--- a/app/src/components/chat/__tests__/ModelQualityPill.test.tsx
+++ b/app/src/components/chat/__tests__/ModelQualityPill.test.tsx
@@ -23,6 +23,18 @@ describe('ModelQualityPill', () => {
     expect(svg).toBeInTheDocument();
   });
 
+  it('gives the pill trailing padding so the chevron is not clipped (#3292)', () => {
+    render(<ModelQualityPill />);
+    const button = screen.getByRole('button', { name: 'composer.modelSelector' });
+    // Horizontal padding + rounded shape keep the trailing chevron fully
+    // inside the pill instead of flush against its right edge.
+    expect(button).toHaveClass('px-2');
+    expect(button).toHaveClass('rounded-full');
+    // The chevron itself must not shrink/clip when space is tight.
+    const svg = button.querySelector('svg');
+    expect(svg).toHaveClass('shrink-0');
+  });
+
   it('has model selector aria-label', () => {
     render(<ModelQualityPill />);
     expect(screen.getByRole('button', { name: 'composer.modelSelector' })).toBeInTheDocument();