diff --git a/desktop/src/components/chat/MessageList.test.tsx b/desktop/src/components/chat/MessageList.test.tsx
index 0d3f10e0..17160095 100644
--- a/desktop/src/components/chat/MessageList.test.tsx
+++ b/desktop/src/components/chat/MessageList.test.tsx
@@ -403,13 +403,13 @@ describe('MessageList nested tool calls', () => {
       },
     })
 
-    render(<MessageList />)
+    const { rerender } = render(<MessageList />)
     const messageList = screen.getByTestId('message-list')
     const scroller = messageList.querySelector('.chat-scroll-area') as HTMLElement
     const layoutObserver = observers.find(({ targets }) => targets.includes(messageList))
     expect(layoutObserver).toBeTruthy()
     expect(screen.getByTestId('conversation-navigator').getAttribute('data-mode')).toBe('full')
-    expect(scroller.className.split(/\s+/)).toContain('pl-20')
+    expect(scroller.className.split(/\s+/)).toContain('px-20')
 
     const resizeTo = (width: number) => {
       act(() => {
@@ -422,20 +422,29 @@ describe('MessageList nested tool calls', () => {
 
     resizeTo(900)
     expect(screen.getByTestId('conversation-navigator').getAttribute('data-mode')).toBe('compact')
-    expect(scroller.className.split(/\s+/)).toContain('pl-12')
+    expect(scroller.className.split(/\s+/)).toContain('px-12')
 
     resizeTo(640)
     expect(screen.getByTestId('conversation-navigator').getAttribute('data-mode')).toBe('compact')
 
     resizeTo(520)
     expect(screen.getByTestId('conversation-navigator').getAttribute('data-mode')).toBe('edge')
-    expect(scroller.className.split(/\s+/)).toContain('pl-7')
+    expect(scroller.className.split(/\s+/)).toContain('px-7')
 
     resizeTo(1000)
     expect(screen.getByTestId('conversation-navigator').getAttribute('data-mode')).toBe('full')
-    expect(scroller.className.split(/\s+/)).toContain('pl-20')
-    expect(scroller.className.split(/\s+/)).not.toContain('pl-12')
-    expect(scroller.className.split(/\s+/)).not.toContain('pl-7')
+    expect(scroller.className.split(/\s+/)).toContain('px-20')
+    expect(scroller.className.split(/\s+/)).not.toContain('px-12')
+    expect(scroller.className.split(/\s+/)).not.toContain('px-7')
+
+    rerender(<MessageList compact />)
+    expect(scroller.className.split(/\s+/)).toContain('px-20')
+
+    resizeTo(900)
+    expect(scroller.className.split(/\s+/)).toContain('px-12')
+
+    resizeTo(520)
+    expect(scroller.className.split(/\s+/)).toContain('px-7')
   })
 
   it('updates the active conversation marker while the transcript scrolls', () => {
diff --git a/desktop/src/components/chat/MessageList.tsx b/desktop/src/components/chat/MessageList.tsx
index ebdffca9..deab99fd 100644
--- a/desktop/src/components/chat/MessageList.tsx
+++ b/desktop/src/components/chat/MessageList.tsx
@@ -1957,18 +1957,18 @@ export function MessageList({ sessionId, compact = false }: MessageListProps = {
     conversationNavigationItems.length >= CONVERSATION_NAVIGATION_MIN_ITEMS
   const chatScrollPaddingClass = compact
     ? showConversationNavigator && conversationNavigationMode === 'full'
-      ? 'pb-5 pl-20 pr-3 py-3'
+      ? 'pb-5 px-20 py-3'
       : showConversationNavigator && conversationNavigationMode === 'compact'
-        ? 'pb-5 pl-12 pr-3 py-3'
+        ? 'pb-5 px-12 py-3'
         : showConversationNavigator && conversationNavigationMode === 'edge'
-          ? 'pb-5 pl-7 pr-3 py-3'
+          ? 'pb-5 px-7 py-3'
           : 'px-3 py-3 pb-5'
     : showConversationNavigator && conversationNavigationMode === 'full'
-      ? 'pl-20 pr-4 py-4'
+      ? 'px-20 py-4'
       : showConversationNavigator && conversationNavigationMode === 'compact'
-        ? 'pl-12 pr-4 py-4'
+        ? 'px-12 py-4'
         : showConversationNavigator && conversationNavigationMode === 'edge'
-          ? 'pl-7 pr-4 py-4'
+          ? 'px-7 py-4'
           : 'px-4 py-4'
   const confirmTurnCard = useMemo(
     () => visibleTurnChangeCards.find((card) => card.target.messageId === turnUndoConfirmTargetId) ?? null,