From 457ca0daabcaa8397f4375ee8aa2671336b648ff Mon Sep 17 00:00:00 2001
From: simosmik <simosmik@gmail.com>
Date: Tue, 21 Apr 2026 12:32:09 +0000
Subject: [PATCH] fix: reduce size of permission mode button tap target and
 provider selector on  mobile

---
 .../chat/view/subcomponents/ChatComposer.tsx     |  8 ++++----
 .../ProviderSelectionEmptyState.tsx              | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/chat/view/subcomponents/ChatComposer.tsx b/src/components/chat/view/subcomponents/ChatComposer.tsx
index 90387401..e67ee64b 100644
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -320,7 +320,7 @@ export default function ChatComposer({
             <button
               type="button"
               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'
                   ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
                   : permissionMode === 'acceptEdits'
@@ -333,7 +333,7 @@ export default function ChatComposer({
             >
               <div className="flex items-center gap-1.5">
                 <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'
                       ? 'bg-muted-foreground'
                       : permissionMode === 'acceptEdits'
@@ -343,7 +343,7 @@ export default function ChatComposer({
                           : 'bg-primary'
                   }`}
                 />
-                <span className="hidden sm:inline">
+                <span className="hidden whitespace-nowrap sm:inline">
                   {permissionMode === 'default' && t('codex.modes.default')}
                   {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
                   {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
@@ -377,7 +377,7 @@ export default function ChatComposer({
               <PromptInputButton
                 tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }}
                 onClick={onClearInput}
-                className="hidden sm:inline-flex"
+                className="hidden sm:No-flex"
               >
                 <XIcon />
               </PromptInputButton>
diff --git a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
index f328f72e..c4f52ede 100644
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -172,32 +172,32 @@ export default function ProviderSelectionEmptyState({
           <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
             <DialogTrigger asChild>
               <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"
                 tabIndex={0}
               >
-                <div className="flex items-center gap-3 p-4">
+                <div className="flex items-center gap-2 p-3">
                   <SessionProviderLogo
                     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="flex items-center gap-1.5">
-                      <span className="text-sm font-semibold text-foreground">
+                    <div className="flex items-center gap-1">
+                      <span className="text-xs font-semibold text-foreground">
                         {getProviderDisplayName(provider)}
                       </span>
                       <span className="text-xs text-muted-foreground">·</span>
-                      <span className="truncate text-sm text-foreground">
+                      <span className="truncate text-xs text-foreground">
                         {currentModelLabel}
                       </span>
                     </div>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
+                    <p className="mt-0.5 text-[11px] text-muted-foreground">
                       {t("providerSelection.clickToChange", {
                         defaultValue: "Click to change model",
                       })}
                     </p>
                   </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>
               </Card>
             </DialogTrigger>