d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-05-30 08:15:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: reduce size of permission mode button tap target and provider selector on mobile

Browse Source
This commit is contained in:
simosmik
2026-04-21 12:32:09 +00:00
parent 09dcea05fb
commit 457ca0daab
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/chat/view/subcomponents/ChatComposer.tsx
View File

@@ -320,7 +320,7 @@ export default function ChatComposer({
<button <button
type="button" type="button"
onClick={onModeSwitch} onClick={onModeSwitch}
className={`rounded-lg border px-1.5 py-1 text-xs font-medium transition-all duration-200 sm:px-2.5 ${ className={`rounded-lg border p-2 text-xs font-medium transition-all duration-200 sm:px-2.5 sm:py-1 ${
permissionMode === 'default' permissionMode === 'default'
? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted' ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
: permissionMode === 'acceptEdits' : permissionMode === 'acceptEdits'
@@ -333,7 +333,7 @@ export default function ChatComposer({
> >
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<div <div
className={`h-2 w-2 rounded-full sm:h-1.5 sm:w-1.5 ${ className={`h-2.5 w-2.5 rounded-full sm:h-1.5 sm:w-1.5 ${
permissionMode === 'default' permissionMode === 'default'
? 'bg-muted-foreground' ? 'bg-muted-foreground'
: permissionMode === 'acceptEdits' : permissionMode === 'acceptEdits'
@@ -343,7 +343,7 @@ export default function ChatComposer({
: 'bg-primary' : 'bg-primary'
}`} }`}
/> />
<span className="hidden sm:inline"> <span className="hidden whitespace-nowrap sm:inline">
{permissionMode === 'default' && t('codex.modes.default')} {permissionMode === 'default' && t('codex.modes.default')}
{permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')} {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
{permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')} {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
@@ -377,7 +377,7 @@ export default function ChatComposer({
<PromptInputButton <PromptInputButton
tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }} tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }}
onClick={onClearInput} onClick={onClearInput}
className="hidden sm:inline-flex" className="hidden sm:No-flex"
> >
<XIcon /> <XIcon />
</PromptInputButton> </PromptInputButton>

16
src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
View File

@@ -172,32 +172,32 @@ export default function ProviderSelectionEmptyState({
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}> <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Card <Card
className="group mx-auto max-w-sm cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]" className="group mx-auto max-w-xs cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]"
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
<div className="flex items-center gap-3 p-4"> <div className="flex items-center gap-2 p-3">
<SessionProviderLogo <SessionProviderLogo
provider={provider} provider={provider}
className="h-8 w-8 shrink-0" className="h-5 w-5 shrink-0"
/> />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1">
<span className="text-sm font-semibold text-foreground"> <span className="text-xs font-semibold text-foreground">
{getProviderDisplayName(provider)} {getProviderDisplayName(provider)}
</span> </span>
<span className="text-xs text-muted-foreground">·</span> <span className="text-xs text-muted-foreground">·</span>
<span className="truncate text-sm text-foreground"> <span className="truncate text-xs text-foreground">
{currentModelLabel} {currentModelLabel}
</span> </span>
</div> </div>
<p className="mt-0.5 text-xs text-muted-foreground"> <p className="mt-0.5 text-[11px] text-muted-foreground">
{t("providerSelection.clickToChange", { {t("providerSelection.clickToChange", {
defaultValue: "Click to change model", defaultValue: "Click to change model",
})} })}
</p> </p>
</div> </div>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" /> <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" />
</div> </div>
</Card> </Card>
</DialogTrigger> </DialogTrigger>