@@ -2667,7 +2667,7 @@ watch(() => cc.isProcessing.value, (processing, wasProcesing) => {
26672667 </button >
26682668 <div
26692669 v-if =" showDefaultMobileMenu"
2670- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-2 z-50 min-w-[220px] animate-scale-in"
2670+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-2 z-50 min-w-[220px] animate-scale-in"
26712671 @click.stop
26722672 >
26732673 <div class =" px-3 pb-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wide" >
@@ -2724,7 +2724,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
27242724 </button >
27252725 <div
27262726 v-if =" showZenLlmMenu"
2727- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-1 z-50 min-w-[180px] animate-scale-in"
2727+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-1 z-50 min-w-[180px] animate-scale-in"
27282728 @click.stop
27292729 >
27302730 <button
@@ -2770,7 +2770,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
27702770 </button >
27712771 <div
27722772 v-if =" showRagMenu"
2773- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-2 z-50 min-w-[200px] animate-scale-in"
2773+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-2 z-50 min-w-[200px] animate-scale-in"
27742774 @click.stop
27752775 >
27762776 <label
@@ -2839,7 +2839,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
28392839 </button >
28402840 <div
28412841 v-if =" showAssistantSwitcher"
2842- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-1 z-50 min-w-[220px] max-w-[280px] animate-scale-in"
2842+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-1 z-50 min-w-[220px] max-w-[280px] animate-scale-in"
28432843 @click.stop
28442844 >
28452845 <div class =" px-3 py-1.5 text-[10px] uppercase tracking-wide text-muted-foreground border-b border-border/50" >
@@ -2884,7 +2884,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
28842884 </button >
28852885 <div
28862886 v-if =" showExportMenu"
2887- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-1 z-50 min-w-[160px] animate-scale-in"
2887+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-1 z-50 min-w-[160px] animate-scale-in"
28882888 @click.stop
28892889 >
28902890 <button
@@ -2940,7 +2940,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
29402940 </button >
29412941 <div
29422942 v-if =" showCcDirMenu"
2943- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-1 z-50 min-w-[260px] animate-scale-in"
2943+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-1 z-50 min-w-[260px] animate-scale-in"
29442944 @click.stop
29452945 >
29462946 <button
@@ -3023,7 +3023,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
30233023 </button >
30243024 <div
30253025 v-if =" showCcFilesMenu"
3026- class =" absolute left-full ml-2 top-0 zen-glass rounded-xl shadow-2xl py-1 z-50 min-w-[200px] max-w-[300px] animate-scale-in"
3026+ class =" absolute left-full ml-2 top-0 zen-glass zen-dropdown rounded-xl shadow-2xl py-1 z-50 min-w-[200px] max-w-[300px] animate-scale-in"
30273027 @click.stop
30283028 >
30293029 <label
@@ -3714,7 +3714,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
37143714 <div
37153715 v-if =" cc.isActive.value"
37163716 :class =" [
3717- 'relative p-4 shrink-0',
3717+ 'relative p-2 sm:p- 4 shrink-0',
37183718 fullscreenStore.isFullscreen ? 'zen-glass' : 'bg-card',
37193719 inputPosition === 'bottom' ? 'border-t border-border order-last' + (fullscreenStore.isFullscreen ? '' : ' pb-24') : 'border-b border-border'
37203720 ]"
@@ -3793,7 +3793,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
37933793 <div
37943794 v-else-if =" currentSession && !isReadOnly"
37953795 :class =" [
3796- 'relative p-4 shrink-0',
3796+ 'relative p-2 sm:p- 4 shrink-0',
37973797 fullscreenStore.isFullscreen ? 'zen-glass' : 'bg-card',
37983798 inputPosition === 'bottom' ? 'border-t border-border order-last' + (fullscreenStore.isFullscreen ? '' : ' pb-24') : 'border-b border-border'
37993799 ]"
@@ -3853,89 +3853,98 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
38533853 </button >
38543854 </div >
38553855 </div >
3856+ <!-- Mobile: 2 rows — (1) textarea + send, (2) new/web/file/mic.
3857+ Desktop (sm:): single row via sm:contents + sm:order — same look as before. -->
38563858 <div
38573859 :class =" [
3858- 'flex gap-3 max-w-3xl mx-auto',
3859- inputPosition === 'bottom' ? 'items-stretch' : 'items-end',
3860+ 'flex flex-col gap-2 sm:flex-row sm: gap-3 max-w-3xl mx-auto',
3861+ inputPosition === 'bottom' ? 'sm: items-stretch' : 'sm: items-end',
38603862 ]"
38613863 >
3862- <!-- New branch button (yellow) -->
3863- <button
3864- v-if =" currentSessionId"
3865- :disabled =" newBranchMutation.isPending.value"
3866- class =" p-3 rounded-lg bg-amber-500 hover:bg-amber-600 text-white transition-colors disabled:opacity-50 shrink-0"
3867- :title =" t('chatView.newBranch')"
3868- @click =" startNewBranchAndShowTree"
3869- >
3870- <Plus class="w-5 h-5" />
3871- </button >
3872- <!-- Web search toggle -->
3873- <button
3874- v-if =" currentSessionId && !isReadOnly"
3875- :class =" [
3876- 'p-3 rounded-lg transition-colors shrink-0',
3877- webSearchEnabled ? 'bg-orange-500/20 text-orange-400 hover:bg-orange-500/30' : 'bg-secondary text-muted-foreground hover:bg-secondary/80'
3878- ]"
3879- :title =" webSearchEnabled ? t('chatView.webSearchOn') : t('chatView.webSearchOff')"
3880- @click =" webSearchEnabled = !webSearchEnabled"
3881- >
3882- <Globe class="w-5 h-5" />
3883- </button >
3884- <textarea
3885- ref =" messageInputRef"
3886- v-model =" inputMessage"
3887- :placeholder =" isReadOnly ? t('chatView.readOnlyHint') : 'Type a message...'"
3888- rows =" 1"
3889- class =" flex-1 p-3 bg-secondary rounded-lg focus:outline-none focus:ring-2 focus:ring-primary resize-none max-h-[288px] overflow-y-auto"
3890- :disabled =" isStreaming || isRecording || isReadOnly"
3891- @keydown.ctrl.enter.prevent =" sendMessage"
3892- @keydown.meta.enter.prevent =" sendMessage"
3893- @input =" onInputAutoResize"
3894- @paste =" onPaste"
3895- />
3896- <!-- File upload button (images + documents) -->
3897- <button
3898- :disabled =" isStreaming || isUploadingImage || !currentSessionId"
3899- class =" p-3 rounded-lg bg-secondary hover:bg-secondary/80 transition-colors disabled:opacity-50"
3900- :title =" t('chatView.attachFile')"
3901- @click =" imageInputRef?.click()"
3902- >
3903- <Loader2 v-if =" isUploadingImage " class="w-5 h-5 animate-spin" />
3904- <Paperclip v-else class="w-5 h-5" />
3905- </button >
3906- <input
3907- ref =" imageInputRef"
3908- type =" file"
3909- accept =" image/jpeg,image/png,image/webp,image/gif,.pdf,.xlsx,.xls,.docx,.doc,.txt,.csv,.md,.json,.xml,.html,.log,.yaml,.yml"
3910- multiple
3911- class =" hidden"
3912- @change =" handleImageUpload"
3913- />
3914- <!-- Microphone button -->
3915- <button
3916- :disabled =" isStreaming || isTranscribing"
3917- :class =" [
3918- 'p-3 rounded-lg transition-colors',
3919- isRecording
3920- ? 'bg-red-500 text-white animate-pulse'
3921- : 'bg-secondary hover:bg-secondary/80'
3922- ]"
3923- :title =" isRecording ? 'Stop recording' : (isTranscribing ? 'Transcribing...' : 'Start voice input')"
3924- @click =" toggleRecording"
3925- >
3926- <Loader2 v-if =" isTranscribing " class="w-5 h-5 animate-spin" />
3927- <MicOff v-else-if =" isRecording " class="w-5 h-5" />
3928- <Mic v-else class="w-5 h-5" />
3929- </button >
3930- <!-- Send button -->
3931- <button
3932- :disabled =" (!inputMessage.trim() && !pastedBlocks.length && !pendingImages.length) || isStreaming || isRecording"
3933- class =" p-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 transition-colors"
3934- @click =" sendMessage"
3935- >
3936- <Send v-if =" ! isStreaming " class="w-5 h-5" />
3937- <Loader2 v-else class="w-5 h-5 animate-spin" />
3938- </button >
3864+ <!-- Row 1 on mobile: textarea + send. Children flatten on desktop. -->
3865+ <div class =" flex gap-2 items-end sm:contents order-1" >
3866+ <textarea
3867+ ref =" messageInputRef"
3868+ v-model =" inputMessage"
3869+ :placeholder =" isReadOnly ? t('chatView.readOnlyHint') : 'Type a message...'"
3870+ rows =" 1"
3871+ class =" flex-1 p-3 bg-secondary rounded-lg focus:outline-none focus:ring-2 focus:ring-primary resize-none max-h-[288px] overflow-y-auto sm:order-3"
3872+ :disabled =" isStreaming || isRecording || isReadOnly"
3873+ @keydown.ctrl.enter.prevent =" sendMessage"
3874+ @keydown.meta.enter.prevent =" sendMessage"
3875+ @input =" onInputAutoResize"
3876+ @paste =" onPaste"
3877+ />
3878+ <!-- Send button -->
3879+ <button
3880+ :disabled =" (!inputMessage.trim() && !pastedBlocks.length && !pendingImages.length) || isStreaming || isRecording"
3881+ class =" p-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 transition-colors shrink-0 sm:order-6"
3882+ @click =" sendMessage"
3883+ >
3884+ <Send v-if =" ! isStreaming " class="w-5 h-5" />
3885+ <Loader2 v-else class="w-5 h-5 animate-spin" />
3886+ </button >
3887+ </div >
3888+
3889+ <!-- Row 2 on mobile: secondary actions. Children flatten on desktop. -->
3890+ <div class =" flex gap-2 items-end justify-start sm:contents order-2" >
3891+ <!-- New branch button (yellow) -->
3892+ <button
3893+ v-if =" currentSessionId"
3894+ :disabled =" newBranchMutation.isPending.value"
3895+ class =" p-3 rounded-lg bg-amber-500 hover:bg-amber-600 text-white transition-colors disabled:opacity-50 shrink-0 sm:order-1"
3896+ :title =" t('chatView.newBranch')"
3897+ @click =" startNewBranchAndShowTree"
3898+ >
3899+ <Plus class="w-5 h-5" />
3900+ </button >
3901+ <!-- Web search toggle -->
3902+ <button
3903+ v-if =" currentSessionId && !isReadOnly"
3904+ :class =" [
3905+ 'p-3 rounded-lg transition-colors shrink-0 sm:order-2',
3906+ webSearchEnabled ? 'bg-orange-500/20 text-orange-400 hover:bg-orange-500/30' : 'bg-secondary text-muted-foreground hover:bg-secondary/80'
3907+ ]"
3908+ :title =" webSearchEnabled ? t('chatView.webSearchOn') : t('chatView.webSearchOff')"
3909+ @click =" webSearchEnabled = !webSearchEnabled"
3910+ >
3911+ <Globe class="w-5 h-5" />
3912+ </button >
3913+ <!-- File upload button (images + documents) -->
3914+ <button
3915+ :disabled =" isStreaming || isUploadingImage || !currentSessionId"
3916+ class =" p-3 rounded-lg bg-secondary hover:bg-secondary/80 transition-colors disabled:opacity-50 shrink-0 sm:order-4"
3917+ :title =" t('chatView.attachFile')"
3918+ @click =" imageInputRef?.click()"
3919+ >
3920+ <Loader2 v-if =" isUploadingImage " class="w-5 h-5 animate-spin" />
3921+ <Paperclip v-else class="w-5 h-5" />
3922+ </button >
3923+ <input
3924+ ref =" imageInputRef"
3925+ type =" file"
3926+ accept =" image/jpeg,image/png,image/webp,image/gif,.pdf,.xlsx,.xls,.docx,.doc,.txt,.csv,.md,.json,.xml,.html,.log,.yaml,.yml"
3927+ multiple
3928+ class =" hidden"
3929+ @change =" handleImageUpload"
3930+ />
3931+ <!-- Microphone button -->
3932+ <button
3933+ :disabled =" isStreaming || isTranscribing"
3934+ :class =" [
3935+ 'p-3 rounded-lg transition-colors shrink-0 sm:order-5',
3936+ isRecording
3937+ ? 'bg-red-500 text-white animate-pulse'
3938+ : 'bg-secondary hover:bg-secondary/80'
3939+ ]"
3940+ :title =" isRecording ? 'Stop recording' : (isTranscribing ? 'Transcribing...' : 'Start voice input')"
3941+ @click =" toggleRecording"
3942+ >
3943+ <Loader2 v-if =" isTranscribing " class="w-5 h-5 animate-spin" />
3944+ <MicOff v-else-if =" isRecording " class="w-5 h-5" />
3945+ <Mic v-else class="w-5 h-5" />
3946+ </button >
3947+ </div >
39393948 </div >
39403949 <!-- Recording indicator -->
39413950 <div v-if =" isRecording" class =" mt-2 flex items-center gap-2 text-sm text-red-500" >
@@ -3952,7 +3961,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
39523961 <div
39533962 ref =" messagesContainer"
39543963 :class =" [
3955- 'h-full overflow-y-auto overflow-x-hidden p-4 space-y-4 claude-messages-container',
3964+ 'h-full overflow-y-auto overflow-x-hidden p-2 pr-10 sm:p-4 sm:pr-14 space-y-3 sm: space-y-4 claude-messages-container',
39563965 fullscreenStore.isFullscreen ? 'zen-messages' : ''
39573966 ]"
39583967 @click =" handleMessagesClick"
@@ -4285,7 +4294,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
42854294 </div >
42864295 <button
42874296 v-if =" streamAbort"
4288- class =" shrink-0 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-red-500/15 hover:bg-red-500/25 text-red-500 border border-red-500/30 text-xs font-medium transition-colors"
4297+ class =" shrink-0 flex items-center sm: gap-1.5 p-1.5 sm: px-2.5 sm: py-1.5 rounded-full bg-red-500/15 hover:bg-red-500/25 text-red-500 border border-red-500/30 text-xs font-medium transition-colors"
42894298 :title =" t('chatView.stopGeneration')"
42904299 @click =" stopStreaming"
42914300 >
@@ -4312,7 +4321,7 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
43124321 </div >
43134322 <button
43144323 v-if =" streamAbort"
4315- class =" shrink-0 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-red-500/15 hover:bg-red-500/25 text-red-500 border border-red-500/30 text-xs font-medium transition-colors"
4324+ class =" shrink-0 flex items-center sm: gap-1.5 p-1.5 sm: px-2.5 sm: py-1.5 rounded-full bg-red-500/15 hover:bg-red-500/25 text-red-500 border border-red-500/30 text-xs font-medium transition-colors"
43164325 :title =" t('chatView.stopGeneration')"
43174326 @click =" stopStreaming"
43184327 >
@@ -4326,34 +4335,34 @@ class="w-4 h-4 rounded border flex items-center justify-center shrink-0"
43264335 <!-- Floating scroll buttons: top = dialog start, middle = within-response, bottom = dialog end -->
43274336 <template v-if =" currentSession && ! cc .isActive .value " >
43284337 <button
4329- class =" absolute right-1 sm:right-3 top-2 z-30 p-1.5 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
4338+ class =" absolute right-1.5 sm:right-3 top-2 z-30 p-1 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
43304339 :title =" t('chatView.scrollDialogTop')"
43314340 @click =" scrollToTop"
43324341 >
4333- <ArrowUpToLine class="w-3. 5 h-3. 5 sm:w-4 sm:h-4 " />
4342+ <ArrowUpToLine class="w-3 h-3 sm:w-4 sm:h-4 " />
43344343 </button >
4335- <div class =" absolute right-1 sm:right-3 top-1/2 -translate-y-1/2 z-30 flex flex-col gap-1" >
4344+ <div class =" absolute right-1.5 sm:right-3 top-1/2 -translate-y-1/2 z-30 flex flex-col gap-1" >
43364345 <button
4337- class =" p-1.5 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
4346+ class =" p-1 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
43384347 :title =" t('chatView.scrollResponseTop')"
43394348 @click =" scrollToMessageTop"
43404349 >
4341- <ArrowUp class="w-3. 5 h-3. 5 sm:w-4 sm:h-4 " />
4350+ <ArrowUp class="w-3 h-3 sm:w-4 sm:h-4 " />
43424351 </button >
43434352 <button
4344- class =" p-1.5 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
4353+ class =" p-1 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
43454354 :title =" t('chatView.scrollResponseBottom')"
43464355 @click =" scrollToMessageBottom"
43474356 >
4348- <ArrowDown class="w-3. 5 h-3. 5 sm:w-4 sm:h-4 " />
4357+ <ArrowDown class="w-3 h-3 sm:w-4 sm:h-4 " />
43494358 </button >
43504359 </div >
43514360 <button
4352- class =" absolute right-1 sm:right-3 bottom-2 z-30 p-1.5 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
4361+ class =" absolute right-1.5 sm:right-3 bottom-2 z-30 p-1 sm:p-2 rounded-full bg-card/80 backdrop-blur border border-border shadow-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
43534362 :title =" t('chatView.scrollDialogBottom')"
43544363 @click =" scrollToBottom"
43554364 >
4356- <ArrowDownToLine class="w-3. 5 h-3. 5 sm:w-4 sm:h-4 " />
4365+ <ArrowDownToLine class="w-3 h-3 sm:w-4 sm:h-4 " />
43574366 </button >
43584367 </template >
43594368 </div > <!-- /messages wrapper -->
0 commit comments