fix(chat): pad model-selector pill so the chevron isn't clipped (#3292) (#3977)

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"

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();