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:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user