starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-07-28 23:48:39 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

style: reduce inline pill button size above chat composer

Browse Source 
Shrink padding (px-2 py-1 → px-1.5 py-0.5), font (12px → 11px),
gap (1.5 → 1), icon size (3 → 2.5), and model name max-width
(140px → 120px) on all four pill trigger buttons. Dropdown popovers
remain unchanged.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-25 20:20:36 +01:00
co-authored by Copilot
parent 1b1ebdb676
commit fa037859da
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/chat/InlinePills.tsx
+15 -15
View File
@@ -63,7 +63,7 @@ export function InlineModelPill({
<button <button
aria-expanded={open} aria-expanded={open}
aria-haspopup="listbox" aria-haspopup="listbox"
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${ className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition ${
open open
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300' ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300' : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -72,9 +72,9 @@ export function InlineModelPill({
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
type="button" type="button"
> >
{provider && <ProviderIcon provider={provider} className="size-3" />} {provider && <ProviderIcon provider={provider} className="size-2.5" />}
<span className="max-w-[140px] truncate">{displayName}</span> <span className="max-w-[120px] truncate">{displayName}</span>
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} /> <ChevronDown className={`size-2.5 transition ${open ? 'rotate-180' : ''}`} />
</button> </button>
{open && !disabled && ( {open && !disabled && (
@@ -154,8 +154,8 @@ export function InlineThinkingPill({
if (supportedEfforts && supportedEfforts.length === 0) { if (supportedEfforts && supportedEfforts.length === 0) {
return ( return (
<span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600"> <span className="inline-flex items-center gap-1 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-1.5 py-0.5 text-[11px] text-zinc-600">
<Sparkles className="size-3" /> <Sparkles className="size-2.5" />
N/A N/A
</span> </span>
); );
@@ -168,7 +168,7 @@ export function InlineThinkingPill({
<button <button
aria-expanded={open} aria-expanded={open}
aria-haspopup="listbox" aria-haspopup="listbox"
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${ className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition ${
open open
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300' ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300' : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -177,9 +177,9 @@ export function InlineThinkingPill({
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
type="button" type="button"
> >
<Sparkles className="size-3" /> <Sparkles className="size-2.5" />
<span>{currentLabel}</span> <span>{currentLabel}</span>
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} /> <ChevronDown className={`size-2.5 transition ${open ? 'rotate-180' : ''}`} />
</button> </button>
{open && !disabled && ( {open && !disabled && (
@@ -230,7 +230,7 @@ export function InlineToolsPill({
<button <button
aria-expanded={open} aria-expanded={open}
aria-haspopup="listbox" aria-haspopup="listbox"
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${ className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition ${
open open
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300' ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
: 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300' : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -239,9 +239,9 @@ export function InlineToolsPill({
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
type="button" type="button"
> >
<Server className="size-3" /> <Server className="size-2.5" />
<span>{enabledCount}/{totalCount} tools</span> <span>{enabledCount}/{totalCount} tools</span>
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} /> <ChevronDown className={`size-2.5 transition ${open ? 'rotate-180' : ''}`} />
</button> </button>
{open && !disabled && ( {open && !disabled && (
@@ -340,7 +340,7 @@ export function InlineApprovalPill({
<button <button
aria-expanded={open} aria-expanded={open}
aria-haspopup="listbox" aria-haspopup="listbox"
className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${ className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium transition ${
open open
? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300' ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
: isOverridden : isOverridden
@@ -351,9 +351,9 @@ export function InlineApprovalPill({
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
type="button" type="button"
> >
<ShieldCheck className="size-3" /> <ShieldCheck className="size-2.5" />
<span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span> <span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
<ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} /> <ChevronDown className={`size-2.5 transition ${open ? 'rotate-180' : ''}`} />
</button> </button>
{open && !disabled && ( {open && !disabled && (