d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-07-01 18:13:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat): unify messages and composer into centered column

Browse Source 
Constrain both ChatMessagesPane content and ChatComposer to the same
max-w-3xl centered column. Previously only
the composer had a max-width, causing messages to fill the full width
while the input stayed narrow, making them visually misaligned with
large empty gutters on either side.
This commit is contained in:
Haileyesus
2026-06-29 22:52:35 +03:00
parent 19b59e701e
commit e71f3bf3f6
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,7 +203,7 @@ export default function ChatComposer({
)}
{pendingPermissionRequests.length > 0 && (
<div className="mx-auto mb-3 max-w-4xl">
<div className="mx-auto mb-3 max-w-3xl">
<PermissionRequestsBanner
pendingPermissionRequests={pendingPermissionRequests}
handlePermissionDecision={handlePermissionDecision}
@@ -212,7 +212,7 @@ export default function ChatComposer({
</div>
)}
{!hasQuestionPanel && <div className="relative mx-auto max-w-4xl">
{!hasQuestionPanel && <div className="relative mx-auto max-w-3xl">
{showFileDropdown && filteredFiles.length > 0 && (
<div className="absolute bottom-full left-0 right-0 z-50 mb-2 max-h-48 overflow-y-auto rounded-xl border border-border/50 bg-card/95 shadow-lg backdrop-blur-md">
{filteredFiles.map((file, index) => (

4
src/components/chat/view/subcomponents/ChatMessagesPane.tsx
View File

@@ -163,8 +163,9 @@ function ChatMessagesPane({
ref={scrollContainerRef}
onWheel={onWheel}
onTouchMove={onTouchMove}
className="chat-messages-pane relative min-h-0 flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
className="chat-messages-pane relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-3 sm:py-4"
>
<div className="mx-auto w-full max-w-3xl space-y-3 px-4 sm:space-y-4">
{(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
<div className="mt-8 text-center text-gray-500 dark:text-gray-400">
<div className="flex items-center justify-center space-x-2">
@@ -295,6 +296,7 @@ function ChatMessagesPane({
})()}
</>
)}
</div>
</div>
);
}