d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-07-02 02:22:55 +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 && ( {pendingPermissionRequests.length > 0 && (
<div className="mx-auto mb-3 max-w-4xl"> <div className="mx-auto mb-3 max-w-3xl">
<PermissionRequestsBanner <PermissionRequestsBanner
pendingPermissionRequests={pendingPermissionRequests} pendingPermissionRequests={pendingPermissionRequests}
handlePermissionDecision={handlePermissionDecision} handlePermissionDecision={handlePermissionDecision}
@@ -212,7 +212,7 @@ export default function ChatComposer({
</div> </div>
)} )}
{!hasQuestionPanel && <div className="relative mx-auto max-w-4xl"> {!hasQuestionPanel && <div className="relative mx-auto max-w-3xl">
{showFileDropdown && filteredFiles.length > 0 && ( {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"> <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) => ( {filteredFiles.map((file, index) => (

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

@@ -163,8 +163,9 @@ function ChatMessagesPane({
ref={scrollContainerRef} ref={scrollContainerRef}
onWheel={onWheel} onWheel={onWheel}
onTouchMove={onTouchMove} 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 ? ( {(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
<div className="mt-8 text-center text-gray-500 dark:text-gray-400"> <div className="mt-8 text-center text-gray-500 dark:text-gray-400">
<div className="flex items-center justify-center space-x-2"> <div className="flex items-center justify-center space-x-2">
@@ -295,6 +296,7 @@ function ChatMessagesPane({
})()} })()}
</> </>
)} )}
</div>
</div> </div>
); );
} }