BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile chat input layout (#344)

Browse Source 
* refactor(chat): adjust mobile controls layout

Improve alignment of mobile model and agent buttons with action buttons
Constrain mobile controls to a max width to prevent overflow on small screens

* fix: improve MobileAgentButton mobile interaction

Replace touch-none with touch-pan-x to enable horizontal swipe
Wrap the agent label in a scrollable container to prevent truncation

* fix(ui): allow horizontal scroll for model label

Enable horizontal scrolling for long model labels on mobile
Prevent truncation by letting the label overflow horizontally
Improve visibility by keeping the full label accessible without clipping
This commit is contained in:
Nelson Pires
2026-02-07 11:30:08 +02:00
committed by GitHub
parent 7d99aea6cc
commit d0df6ccd71
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+8 -4
View File
@@ -1853,10 +1853,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
<div className="flex items-center gap-x-1">
{attachmentsControls}
</div>
<div className="flex items-center flex-shrink-0 gap-x-1">
<MobileModelButton onOpenModel={handleOpenMobileControls} />
<MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} />
{actionButtons}
<div className="flex items-center min-w-0 gap-x-1 justify-end">
<div className="flex items-center gap-x-1 min-w-0 max-w-[60vw] flex-shrink">
<MobileModelButton onOpenModel={handleOpenMobileControls} className="min-w-0 flex-shrink" />
<MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
</div>
<div className="flex items-center gap-x-1 flex-shrink-0">
{actionButtons}
</div>
</div>
</div>
<ModelControls