Commit b7b3ef1e6fcb5c22a9790d2578fe8af7ce396835 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-09 16:53:53-07:00
committer	GitHub <noreply@github.com> 2026-09-09 16:53:53-07:00
log	b7b3ef1e6fcb5c22a9790d2578fe8af7ce396835
tree	21f16a9d3feb76ea1a549bb5d495676682e58c07
parent	8d8189e67dc091ffb91df451c9a957bbd68a5364
signature	Signed by PGP key B5690EEEBB952194

fix(ui): use available space for composer model names (#11002)

5 files changed, 23 insertions(+), 24 deletions(-)

apps
- mobile
  - src
    components
    ComposerToolbar.tsx
    features
    threads
    NewTaskDraftScreen.tsx
    ThreadComposer.tsx
- web
  - src
    components
    chat
    ChatComposer.tsx
    ProviderModelPicker.tsx

apps/mobile/src/components/ComposerToolbar.tsx+1-1

...	...	@@ -32,7 +32,7 @@ export function ComposerInlineControl(props: {
32	32	readonly icon?: ComponentProps<typeof SymbolView>["name"];
33	33	readonly iconNode?: ReactNode;
34	34	readonly label: string;
35		readonly maxWidth?: number;
	35	readonly maxWidth?: ViewStyle["maxWidth"];
36	36	readonly onPress?: () => void;
37	37	readonly selected?: boolean;
38	38	readonly static?: boolean;

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+18-17

...	...	@@ -30,7 +30,6 @@ import {
30	30	ComposerActionButton,
31	31	ComposerInlineControl,
32	32	ComposerToolbarRow,
33		ComposerToolbarScroller,
34	33	} from "../../components/ComposerToolbar";
35	34	import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
36	35	import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
...	...	@@ -1345,21 +1344,23 @@ export function NewTaskDraftScreen(props: {
1345	1344	onPickMedia={handlePickMedia}
1346	1345	onPickFiles={handlePickFiles}
1347	1346	/>
1348		<ComposerToolbarScroller align="end" contentPaddingRight={0} fadeSurface="sheet">
1349		<ComposerInlineControl
1350		accessibilityLabel="Model and reasoning settings"
1351		disabled={isComposerInteractionLocked}
1352		emphasized
1353		iconNode={
1354		<ProviderIcon
1355		provider={flow.selectedModelOption?.providerDriver}
1356		size={16}
1357		/>
1358		}
1359		label={flow.selectedModelOption?.label ?? "Choose model"}
1360		maxWidth={152}
1361		onPress={settingsSheetPresentation.open}
1362		/>
	1347	<View className="min-w-0 flex-1 flex-row items-center justify-end gap-2">
	1348	<View className="min-w-0 shrink">
	1349	<ComposerInlineControl
	1350	accessibilityLabel="Model and reasoning settings"
	1351	disabled={isComposerInteractionLocked}
	1352	emphasized
	1353	iconNode={
	1354	<ProviderIcon
	1355	provider={flow.selectedModelOption?.providerDriver}
	1356	size={16}
	1357	/>
	1358	}
	1359	label={flow.selectedModelOption?.label ?? "Choose model"}
	1360	maxWidth="100%"
	1361	onPress={settingsSheetPresentation.open}
	1362	/>
	1363	</View>
1363	1364	{flow.planModeEnabled ? (
1364	1365	<ComposerInlineControl
1365	1366	accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}
...	...	@@ -1380,7 +1381,7 @@ export function NewTaskDraftScreen(props: {
1380	1381	showChevron={false}
1381	1382	/>
1382	1383	) : null}
1383		</ComposerToolbarScroller>
	1384	</View>
1384	1385	</>
1385	1386	)}
1386	1387	<ComposerDictationPrimaryAction

apps/mobile/src/features/threads/ThreadComposer.tsx+2-2

...	...	@@ -780,7 +780,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
780	780	onPickMedia={props.onPickDraftMedia}
781	781	onPickFiles={props.onPickDraftFiles}
782	782	/>
783		<View className="min-w-0 shrink" style={{ maxWidth: 152 }}>
	783	<View className="min-w-0 shrink">
784	784	<ComposerInlineControl
785	785	accessibilityLabel="Model and reasoning settings"
786	786	emphasized
...	...	@@ -788,7 +788,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
788	788	<ProviderIcon provider={currentModelOption?.providerDriver} size={16} />
789	789	}
790	790	label={currentModelOption?.label ?? currentModelSelection.model}
791		maxWidth={152}
	791	maxWidth="100%"
792	792	onPress={openSettings}
793	793	/>
794	794	</View>

apps/web/src/components/chat/ChatComposer.tsx-1

...	...	@@ -4146,7 +4146,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
4146	4146	) : null}
4147	4147	<ProviderModelPicker
4148	4148	isComposerOwned
4149		compact={composerControlsCompact}
4150	4149	disabled={providerCatalogPending}
4151	4150	activeInstanceId={
4152	4151	providerCatalogPending

apps/web/src/components/chat/ProviderModelPicker.tsx+2-3

...	...	@@ -42,7 +42,6 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
42	42	activeProviderIconClassName?: string;
43	43	instanceIndicatorBackground?: string;
44	44	size?: ComposerControlSize;
45		compact?: boolean;
46	45	isComposerOwned?: boolean;
47	46	disabled?: boolean;
48	47	terminalOpen?: boolean;
...	...	@@ -171,8 +170,8 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
171	170	size={size}
172	171	data-chat-provider-model-picker="true"
173	172	className={cn(
174		"min-w-0 justify-between whitespace-nowrap",
175		props.compact ? "max-w-42 shrink-0" : "max-w-48 shrink sm:max-w-56",
	173	"min-w-0 shrink justify-between whitespace-nowrap",
	174	!props.isComposerOwned && "max-w-48 sm:max-w-56",
176	175	props.triggerClassName,
177	176	)}
178	177	disabled={props.disabled}