feat(mobile): polish composer model/agent controls and selection overlay

Redesign the mobile composer model and agent buttons as borderless, full-bleed
labels that hug their content, truncate with an ellipsis when space is tight,
and show the provider logo inline before the model name. Tighten the footer
action buttons (sessions / attach / auto-accept) so they sit close together,
with a small left inset on the group. In the mobile model selection overlay,
make the thinking-variant control text-only with a chevron, vertically center
the variant and favorite controls in each row, and place the provider logo
inline with the model name.
This commit is contained in:
Bohdan Triapitsyn
2026-06-28 13:33:55 +03:00
parent 1178c4e4f5
commit bf1d0d3a75
5 changed files with 34 additions and 17 deletions
@@ -73,8 +73,8 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
onPointerLeave={handlePointerLeave}
onContextMenu={(e) => e.preventDefault()}
className={cn(
'inline-flex min-w-0 items-center select-none',
'rounded-lg border border-border/50 px-1.5',
'inline-flex min-w-0 items-stretch select-none',
'rounded-lg',
'typography-micro font-medium',
'focus:outline-none hover:bg-[var(--interactive-hover)]',
'touch-none',
@@ -88,7 +88,9 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
}}
title={agentLabel}
>
<span className="truncate">{agentLabel}</span>
<span className="flex h-full w-full min-w-0 items-center">
<span className="truncate">{agentLabel}</span>
</span>
</button>
);
};