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

feat: widen chat content area

Browse Source 
Chat messages use more horizontal space
Chat input keeps its previous max width
This commit is contained in:
Bohdan Triapitsyn
2026-04-26 18:04:42 +03:00
parent 6176ee2b0f
commit c8eb9a6c5f
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -3306,7 +3306,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
)} )}
style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined} style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined}
> >
<div className={cn('chat-column relative overflow-visible', isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}> <div className={cn('chat-input-column relative overflow-visible', isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
<AttachedFilesList /> <AttachedFilesList />
<QueuedMessageChips <QueuedMessageChips
onEditMessage={handleQueuedMessageEdit} onEditMessage={handleQueuedMessageEdit}
packages/ui/src/styles/typography.css
+11 -1
View File
@@ -25,13 +25,19 @@
} }
.chat-column { .chat-column {
width: min(100%, 64rem);
margin-inline: auto;
padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
}
.chat-input-column {
width: min(100%, 48rem); width: min(100%, 48rem);
margin-inline: auto; margin-inline: auto;
padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1)); padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
} }
.chat-message-column { .chat-message-column {
width: min(100%, 48rem); width: min(100%, 64rem);
margin-inline: auto; margin-inline: auto;
padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1)); padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
} }
@@ -41,6 +47,10 @@
padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1)); padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
} }
.chat-input-column {
padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
}
.chat-message-column { .chat-message-column {
padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1)); padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
} }