feat: center session name in header

- Use flexbox to horizontally center session title
- Add absolute positioned spacer for menu button
- Session name now perfectly centered in the top bar
- Message count and streaming badge remain centered below
- Export button stays on the right side
- All 52 tests passing
This commit is contained in:
2026-02-26 01:53:04 +01:00
parent 4e65745bf9
commit e8968ee87b
+29 -4
View File
@@ -161,17 +161,39 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
height: '100vh',
backgroundColor: 'var(--bg-primary)'
}}>
{/* Header - Added padding-left to avoid overlap with menu button */}
{/* Header */}
<header style={{
display: 'flex',
alignItems: 'center',
padding: '16px 20px 16px 80px',
padding: '16px 20px',
borderBottom: '1px solid var(--border)',
backgroundColor: 'var(--bg-secondary)',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
minHeight: '64px'
minHeight: '64px',
position: 'relative'
}}>
<div style={{ flex: 1 }}>
{/* Menu button area spacer */}
<div style={{
position: 'absolute',
left: '16px',
top: '50%',
transform: 'translateY(-50%)',
display: 'flex',
alignItems: 'center',
height: '100%'
}}>
{/* This space is reserved for the menu button in App */}
</div>
{/* Centered Session Name */}
<div style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center'
}}>
<h1 style={{
fontSize: '18px',
fontWeight: 600,
@@ -186,6 +208,7 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
color: 'var(--text-muted)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px'
}}>
<span>{getMessageCount()} messages</span>
@@ -204,6 +227,8 @@ export function ChatWindow({ session, config, onAddMessage }: ChatWindowProps) {
</div>
)}
</div>
{/* Export button on the right */}
<div style={{ display: 'flex', gap: '8px' }}>
<button
onClick={exportConversation}