authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-09 16:53:53-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-09 16:53:53-07:00
logb7b3ef1e6fcb5c22a9790d2578fe8af7ce396835
tree21f16a9d3feb76ea1a549bb5d495676682e58c07
parent8d8189e67dc091ffb91df451c9a957bbd68a5364
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+1-1
...@@ -32,7 +32,7 @@ export function ComposerInlineControl(props: {...@@ -32,7 +32,7 @@ export function ComposerInlineControl(props: {
32 readonly icon?: ComponentProps<typeof SymbolView>["name"];32 readonly icon?: ComponentProps<typeof SymbolView>["name"];
33 readonly iconNode?: ReactNode;33 readonly iconNode?: ReactNode;
34 readonly label: string;34 readonly label: string;
35 readonly maxWidth?: number;35 readonly maxWidth?: ViewStyle["maxWidth"];
36 readonly onPress?: () => void;36 readonly onPress?: () => void;
37 readonly selected?: boolean;37 readonly selected?: boolean;
38 readonly static?: boolean;38 readonly static?: boolean;
apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+18-17
...@@ -30,7 +30,6 @@ import {...@@ -30,7 +30,6 @@ import {
30 ComposerActionButton,30 ComposerActionButton,
31 ComposerInlineControl,31 ComposerInlineControl,
32 ComposerToolbarRow,32 ComposerToolbarRow,
33 ComposerToolbarScroller,
34} from "../../components/ComposerToolbar";33} from "../../components/ComposerToolbar";
35import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";34import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
36import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";35import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
...@@ -1345,21 +1344,23 @@ export function NewTaskDraftScreen(props: {...@@ -1345,21 +1344,23 @@ export function NewTaskDraftScreen(props: {
1345 onPickMedia={handlePickMedia}1344 onPickMedia={handlePickMedia}
1346 onPickFiles={handlePickFiles}1345 onPickFiles={handlePickFiles}
1347 />1346 />
1348 <ComposerToolbarScroller align="end" contentPaddingRight={0} fadeSurface="sheet">1347 <View className="min-w-0 flex-1 flex-row items-center justify-end gap-2">
1349 <ComposerInlineControl1348 <View className="min-w-0 shrink">
1350 accessibilityLabel="Model and reasoning settings"1349 <ComposerInlineControl
1351 disabled={isComposerInteractionLocked}1350 accessibilityLabel="Model and reasoning settings"
1352 emphasized1351 disabled={isComposerInteractionLocked}
1353 iconNode={1352 emphasized
1354 <ProviderIcon1353 iconNode={
1355 provider={flow.selectedModelOption?.providerDriver}1354 <ProviderIcon
1356 size={16}1355 provider={flow.selectedModelOption?.providerDriver}
1357 />1356 size={16}
1358 }1357 />
1359 label={flow.selectedModelOption?.label ?? "Choose model"}1358 }
1360 maxWidth={152}1359 label={flow.selectedModelOption?.label ?? "Choose model"}
1361 onPress={settingsSheetPresentation.open}1360 maxWidth="100%"
1362 />1361 onPress={settingsSheetPresentation.open}
1362 />
1363 </View>
1363 {flow.planModeEnabled ? (1364 {flow.planModeEnabled ? (
1364 <ComposerInlineControl1365 <ComposerInlineControl
1365 accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}1366 accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}
...@@ -1380,7 +1381,7 @@ export function NewTaskDraftScreen(props: {...@@ -1380,7 +1381,7 @@ export function NewTaskDraftScreen(props: {
1380 showChevron={false}1381 showChevron={false}
1381 />1382 />
1382 ) : null}1383 ) : null}
1383 </ComposerToolbarScroller>1384 </View>
1384 </>1385 </>
1385 )}1386 )}
1386 <ComposerDictationPrimaryAction1387 <ComposerDictationPrimaryAction
apps/mobile/src/features/threads/ThreadComposer.tsx+2-2
...@@ -780,7 +780,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer...@@ -780,7 +780,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
780 onPickMedia={props.onPickDraftMedia}780 onPickMedia={props.onPickDraftMedia}
781 onPickFiles={props.onPickDraftFiles}781 onPickFiles={props.onPickDraftFiles}
782 />782 />
783 <View className="min-w-0 shrink" style={{ maxWidth: 152 }}>783 <View className="min-w-0 shrink">
784 <ComposerInlineControl784 <ComposerInlineControl
785 accessibilityLabel="Model and reasoning settings"785 accessibilityLabel="Model and reasoning settings"
786 emphasized786 emphasized
...@@ -788,7 +788,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer...@@ -788,7 +788,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
788 <ProviderIcon provider={currentModelOption?.providerDriver} size={16} />788 <ProviderIcon provider={currentModelOption?.providerDriver} size={16} />
789 }789 }
790 label={currentModelOption?.label ?? currentModelSelection.model}790 label={currentModelOption?.label ?? currentModelSelection.model}
791 maxWidth={152}791 maxWidth="100%"
792 onPress={openSettings}792 onPress={openSettings}
793 />793 />
794 </View>794 </View>
apps/web/src/components/chat/ChatComposer.tsx-1
...@@ -4146,7 +4146,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)...@@ -4146,7 +4146,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
4146 ) : null}4146 ) : null}
4147 <ProviderModelPicker4147 <ProviderModelPicker
4148 isComposerOwned4148 isComposerOwned
4149 compact={composerControlsCompact}
4150 disabled={providerCatalogPending}4149 disabled={providerCatalogPending}
4151 activeInstanceId={4150 activeInstanceId={
4152 providerCatalogPending4151 providerCatalogPending
apps/web/src/components/chat/ProviderModelPicker.tsx+2-3
...@@ -42,7 +42,6 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {...@@ -42,7 +42,6 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
42 activeProviderIconClassName?: string;42 activeProviderIconClassName?: string;
43 instanceIndicatorBackground?: string;43 instanceIndicatorBackground?: string;
44 size?: ComposerControlSize;44 size?: ComposerControlSize;
45 compact?: boolean;
46 isComposerOwned?: boolean;45 isComposerOwned?: boolean;
47 disabled?: boolean;46 disabled?: boolean;
48 terminalOpen?: boolean;47 terminalOpen?: boolean;
...@@ -171,8 +170,8 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {...@@ -171,8 +170,8 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
171 size={size}170 size={size}
172 data-chat-provider-model-picker="true"171 data-chat-provider-model-picker="true"
173 className={cn(172 className={cn(
174 "min-w-0 justify-between whitespace-nowrap",173 "min-w-0 shrink justify-between whitespace-nowrap",
175 props.compact ? "max-w-42 shrink-0" : "max-w-48 shrink sm:max-w-56",174 !props.isComposerOwned && "max-w-48 sm:max-w-56",
176 props.triggerClassName,175 props.triggerClassName,
177 )}176 )}
178 disabled={props.disabled}177 disabled={props.disabled}