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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user