From 21810b82130968953538cf27258849eed783adaa Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Apr 2026 19:10:07 +0000
Subject: [PATCH 1/4] fix: improve Ask view layout adjustment for narrow/split
 windows

- Add container-width detection using ResizeObserver to detect narrow containers
- Automatically switch to vertical layout when container width < 768px
- Add toggle button to collapse/expand code references panel
- Support both horizontal (wide) and vertical (narrow) layouts
- In vertical layout, code references appear below the answer with a collapsible section
- In horizontal layout, add ability to collapse the right panel for full-width answer view

Fixes issue where code citations become impossible to see in split window mode

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
---
 .../chatThread/chatThreadListItem.tsx         | 305 ++++++++++++------
 1 file changed, 214 insertions(+), 91 deletions(-)

diff --git a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
index f84abe97b..e98ce2dc3 100644
--- a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
+++ b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
@@ -3,7 +3,9 @@
 import { AnimatedResizableHandle } from '@/components/ui/animatedResizableHandle';
 import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { Skeleton } from '@/components/ui/skeleton';
-import { CheckCircle, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { CheckCircle, Loader2, PanelLeftClose, PanelLeft } from 'lucide-react';
 import { CSSProperties, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Reference, referenceSchema, SBChatMessage, Source } from "../../types";
@@ -16,6 +18,9 @@ import { ReferencedSourcesListView } from './referencedSourcesListView';
 import isEqual from "fast-deep-equal/react";
 import { ANSWER_TAG } from '../../constants';
 
+// Minimum width in pixels for the horizontal layout to work well
+const MIN_HORIZONTAL_LAYOUT_WIDTH = 768;
+
 interface ChatThreadListItemProps {
     userMessage: SBChatMessage;
     assistantMessage?: SBChatMessage;
@@ -33,6 +38,7 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     chatId,
     index,
 }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
     const leftPanelRef = useRef<HTMLDivElement>(null);
     const [leftPanelHeight, setLeftPanelHeight] = useState<number | null>(null);
     const answerRef = useRef<HTMLDivElement>(null);
@@ -43,6 +49,32 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     const hasAutoCollapsed = useRef(false);
     const userHasManuallyExpanded = useRef(false);
 
+    // Layout state: track container width and user preference
+    const [containerWidth, setContainerWidth] = useState<number | null>(null);
+    const [isReferencePanelCollapsed, setIsReferencePanelCollapsed] = useState(false);
+
+    // Determine if we should use vertical layout based on container width
+    const shouldUseVerticalLayout = containerWidth !== null && containerWidth < MIN_HORIZONTAL_LAYOUT_WIDTH;
+
+    // Monitor container width for responsive layout
+    useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
     const userQuestion = useMemo(() => {
         return userMessage.parts.length > 0 && userMessage.parts[0].type === 'text' ? userMessage.parts[0].text : '';
     }, [userMessage]);
@@ -305,10 +337,162 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     }, [references, sources]);
 
 
+    // Content for the answer/question panel
+    const answerPanelContent = (
+        <div
+            ref={leftPanelRef}
+            className="py-4 h-full"
+        >
+            <div className="flex flex-row gap-2 mb-4">
+                {isStreaming ? (
+                    <Loader2 className="w-4 h-4 animate-spin flex-shrink-0 mt-1.5" />
+                ) : (
+                    <CheckCircle className="w-4 h-4 text-green-700 flex-shrink-0 mt-1.5" />
+                )}
+                <MarkdownRenderer
+                    content={userQuestion.trim()}
+                    className="prose-p:m-0"
+                    escapeHtml={true}
+                />
+            </div>
+
+            {isThinking && (
+                <div className="space-y-4 mb-4">
+                    <Skeleton className="h-4 max-w-32" />
+                    <div className="space-y-2">
+                        <Skeleton className="h-3 max-w-72" />
+                        <Skeleton className="h-3 max-w-64" />
+                        <Skeleton className="h-3 max-w-56" />
+                    </div>
+                </div>
+            )}
+
+            <DetailsCard
+                chatId={chatId}
+                isExpanded={isDetailsPanelExpanded}
+                onExpandedChanged={onExpandDetailsPanel}
+                isThinking={isThinking}
+                isStreaming={isStreaming}
+                thinkingSteps={uiVisibleThinkingSteps}
+                metadata={assistantMessage?.metadata}
+            />
+
+            {(answerPart && assistantMessage) ? (
+                <AnswerCard
+                    ref={answerRef}
+                    answerText={answerPart.text}
+                    chatId={chatId}
+                    messageId={assistantMessage.id}
+                    traceId={assistantMessage.metadata?.traceId}
+                />
+            ) : !isStreaming && (
+                <p className="text-destructive">Error: No answer response was provided</p>
+            )}
+        </div>
+    );
+
+    // Content for the references panel
+    const referencesPanelContent = (
+        <>
+            {referencedFileSources.length > 0 ? (
+                <ReferencedSourcesListView
+                    index={index}
+                    references={references}
+                    sources={referencedFileSources}
+                    hoveredReference={hoveredReference}
+                    selectedReference={selectedReference}
+                    onSelectedReferenceChanged={setSelectedReference}
+                    onHoveredReferenceChanged={setHoveredReference}
+                    style={shouldUseVerticalLayout || isReferencePanelCollapsed ? {} : rightPanelStyle}
+                />
+            ) : isStreaming ? (
+                <div className="space-y-4">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                        <Skeleton key={index} className="w-full h-48" />
+                    ))}
+                </div>
+            ) : (
+                <div className="p-4 text-center text-muted-foreground text-sm">
+                    No file references found
+                </div>
+            )}
+        </>
+    );
+
+    // Layout toggle button for narrow containers
+    const layoutToggleButton = referencedFileSources.length > 0 && (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 w-7 p-0"
+                    onClick={() => setIsReferencePanelCollapsed(!isReferencePanelCollapsed)}
+                >
+                    {isReferencePanelCollapsed ? (
+                        <PanelLeft className="h-4 w-4" />
+                    ) : (
+                        <PanelLeftClose className="h-4 w-4" />
+                    )}
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+                {isReferencePanelCollapsed ? 'Show code references' : 'Hide code references'}
+            </TooltipContent>
+        </Tooltip>
+    );
+
+    // Vertical layout for narrow containers
+    if (shouldUseVerticalLayout) {
+        return (
+            <div
+                className="flex flex-col relative"
+                ref={(node) => {
+                    // Handle both refs
+                    containerRef.current = node;
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    } else if (ref) {
+                        ref.current = node;
+                    }
+                }}
+            >
+                {/* Answer panel with toggle button */}
+                <div className="relative">
+                    {referencedFileSources.length > 0 && (
+                        <div className="absolute top-4 right-0 z-10">
+                            {layoutToggleButton}
+                        </div>
+                    )}
+                    {answerPanelContent}
+                </div>
+
+                {/* References panel - collapsible in vertical layout */}
+                {!isReferencePanelCollapsed && referencedFileSources.length > 0 && (
+                    <div className="border-t pt-4 mt-4">
+                        <div className="text-sm font-medium text-muted-foreground mb-3">Code References</div>
+                        <div className="max-h-[50vh] overflow-y-auto">
+                            {referencesPanelContent}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Horizontal layout for wider containers
     return (
         <div
-            className="flex flex-col md:flex-row relative min-h-[calc(100vh-250px)]"
-            ref={ref}
+            className="flex flex-col relative min-h-[calc(100vh-250px)]"
+            ref={(node) => {
+                // Handle both refs
+                containerRef.current = node;
+                if (typeof ref === 'function') {
+                    ref(node);
+                } else if (ref) {
+                    ref.current = node;
+                }
+            }}
         >
             <ResizablePanelGroup
                 direction="horizontal"
@@ -319,103 +503,42 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
             >
                 <ResizablePanel
                     order={1}
-                    minSize={30}
-                    maxSize={70}
-                    defaultSize={50}
+                    minSize={isReferencePanelCollapsed ? 100 : 30}
+                    maxSize={isReferencePanelCollapsed ? 100 : 70}
+                    defaultSize={isReferencePanelCollapsed ? 100 : 50}
                     style={{
                         overflow: 'visible',
                     }}
                 >
-                    <div
-                        ref={leftPanelRef}
-                        className="py-4 h-full"
-                    >
-                        <div className="flex flex-row gap-2 mb-4">
-                            {isStreaming ? (
-                                <Loader2 className="w-4 h-4 animate-spin flex-shrink-0 mt-1.5" />
-                            ) : (
-                                <CheckCircle className="w-4 h-4 text-green-700 flex-shrink-0 mt-1.5" />
-                            )}
-                            <MarkdownRenderer
-                                content={userQuestion.trim()}
-                                className="prose-p:m-0"
-                                escapeHtml={true}
-                            />
-                        </div>
-
-                        {isThinking && (
-                            <div className="space-y-4 mb-4">
-                                <Skeleton className="h-4 max-w-32" />
-                                <div className="space-y-2">
-                                    <Skeleton className="h-3 max-w-72" />
-                                    <Skeleton className="h-3 max-w-64" />
-                                    <Skeleton className="h-3 max-w-56" />
-                                </div>
+                    <div className="relative">
+                        {referencedFileSources.length > 0 && (
+                            <div className="absolute top-4 right-0 z-10">
+                                {layoutToggleButton}
                             </div>
                         )}
-
-                        <DetailsCard
-                            chatId={chatId}
-                            isExpanded={isDetailsPanelExpanded}
-                            onExpandedChanged={onExpandDetailsPanel}
-                            isThinking={isThinking}
-                            isStreaming={isStreaming}
-                            thinkingSteps={uiVisibleThinkingSteps}
-                            metadata={assistantMessage?.metadata}
-                        />
-
-                        {(answerPart && assistantMessage) ? (
-                            <AnswerCard
-                                ref={answerRef}
-                                answerText={answerPart.text}
-                                chatId={chatId}
-                                messageId={assistantMessage.id}
-                                traceId={assistantMessage.metadata?.traceId}
-                            />
-                        ) : !isStreaming && (
-                            <p className="text-destructive">Error: No answer response was provided</p>
-                        )}
+                        {answerPanelContent}
                     </div>
                 </ResizablePanel>
-                <AnimatedResizableHandle className='mx-4' />
-                <ResizablePanel
-                    order={2}
-                    minSize={30}
-                    maxSize={70}
-                    defaultSize={50}
-                    style={{
-                        overflow: 'clip',
-                        maxHeight: '100%',
-                        minWidth: 0,
-                    }}
-                >
-                    <div
-                        className="sticky top-0"
-                    >
-                        {referencedFileSources.length > 0 ? (
-                            <ReferencedSourcesListView
-                                index={index}
-                                references={references}
-                                sources={referencedFileSources}
-                                hoveredReference={hoveredReference}
-                                selectedReference={selectedReference}
-                                onSelectedReferenceChanged={setSelectedReference}
-                                onHoveredReferenceChanged={setHoveredReference}
-                                style={rightPanelStyle}
-                            />
-                        ) : isStreaming ? (
-                            <div className="space-y-4">
-                                {Array.from({ length: 3 }).map((_, index) => (
-                                    <Skeleton key={index} className="w-full h-48" />
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="p-4 text-center text-muted-foreground text-sm">
-                                No file references found
+                {!isReferencePanelCollapsed && (
+                    <>
+                        <AnimatedResizableHandle className='mx-4' />
+                        <ResizablePanel
+                            order={2}
+                            minSize={30}
+                            maxSize={70}
+                            defaultSize={50}
+                            style={{
+                                overflow: 'clip',
+                                maxHeight: '100%',
+                                minWidth: 0,
+                            }}
+                        >
+                            <div className="sticky top-0">
+                                {referencesPanelContent}
                             </div>
-                        )}
-                    </div>
-                </ResizablePanel>
+                        </ResizablePanel>
+                    </>
+                )}
             </ResizablePanelGroup>
         </div>
     )

From ddbcf1ac232e1666ad4963562eb357d0ab3ce1ec Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Apr 2026 19:11:15 +0000
Subject: [PATCH 2/4] chore: add changelog entry for PR #1107

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 313632b24..889534ad4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- Fixed Ask view layout becoming unusable in narrow/split window mode by adding automatic vertical layout switching and a toggle button to collapse/expand code references. [#1107](https://github.com/sourcebot-dev/sourcebot/pull/1107)
+
 ## [4.16.8] - 2026-04-09
 
 ### Added

From 263a5eb6583d6fc40bdecfe8743d8ae07faa30e7 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Apr 2026 21:05:01 +0000
Subject: [PATCH 3/4] fix: simplify Ask view layout - reduce minSize to allow
 narrower panels

Remove vertical layout system and toggle button. Instead, simply reduce
the minSize from 30% to 20% for both panels, allowing each to shrink
more in narrow/split windows without breaking the layout.

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
---
 .../chatThread/chatThreadListItem.tsx         | 307 ++++++------------
 1 file changed, 92 insertions(+), 215 deletions(-)

diff --git a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
index e98ce2dc3..d1de7ef07 100644
--- a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
+++ b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
@@ -3,9 +3,7 @@
 import { AnimatedResizableHandle } from '@/components/ui/animatedResizableHandle';
 import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { CheckCircle, Loader2, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { CheckCircle, Loader2 } from 'lucide-react';
 import { CSSProperties, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Reference, referenceSchema, SBChatMessage, Source } from "../../types";
@@ -18,9 +16,6 @@ import { ReferencedSourcesListView } from './referencedSourcesListView';
 import isEqual from "fast-deep-equal/react";
 import { ANSWER_TAG } from '../../constants';
 
-// Minimum width in pixels for the horizontal layout to work well
-const MIN_HORIZONTAL_LAYOUT_WIDTH = 768;
-
 interface ChatThreadListItemProps {
     userMessage: SBChatMessage;
     assistantMessage?: SBChatMessage;
@@ -38,7 +33,6 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     chatId,
     index,
 }, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
     const leftPanelRef = useRef<HTMLDivElement>(null);
     const [leftPanelHeight, setLeftPanelHeight] = useState<number | null>(null);
     const answerRef = useRef<HTMLDivElement>(null);
@@ -49,32 +43,6 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     const hasAutoCollapsed = useRef(false);
     const userHasManuallyExpanded = useRef(false);
 
-    // Layout state: track container width and user preference
-    const [containerWidth, setContainerWidth] = useState<number | null>(null);
-    const [isReferencePanelCollapsed, setIsReferencePanelCollapsed] = useState(false);
-
-    // Determine if we should use vertical layout based on container width
-    const shouldUseVerticalLayout = containerWidth !== null && containerWidth < MIN_HORIZONTAL_LAYOUT_WIDTH;
-
-    // Monitor container width for responsive layout
-    useEffect(() => {
-        if (!containerRef.current) {
-            return;
-        }
-
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                setContainerWidth(entry.contentRect.width);
-            }
-        });
-
-        resizeObserver.observe(containerRef.current);
-
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-
     const userQuestion = useMemo(() => {
         return userMessage.parts.length > 0 && userMessage.parts[0].type === 'text' ? userMessage.parts[0].text : '';
     }, [userMessage]);
@@ -337,162 +305,10 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
     }, [references, sources]);
 
 
-    // Content for the answer/question panel
-    const answerPanelContent = (
-        <div
-            ref={leftPanelRef}
-            className="py-4 h-full"
-        >
-            <div className="flex flex-row gap-2 mb-4">
-                {isStreaming ? (
-                    <Loader2 className="w-4 h-4 animate-spin flex-shrink-0 mt-1.5" />
-                ) : (
-                    <CheckCircle className="w-4 h-4 text-green-700 flex-shrink-0 mt-1.5" />
-                )}
-                <MarkdownRenderer
-                    content={userQuestion.trim()}
-                    className="prose-p:m-0"
-                    escapeHtml={true}
-                />
-            </div>
-
-            {isThinking && (
-                <div className="space-y-4 mb-4">
-                    <Skeleton className="h-4 max-w-32" />
-                    <div className="space-y-2">
-                        <Skeleton className="h-3 max-w-72" />
-                        <Skeleton className="h-3 max-w-64" />
-                        <Skeleton className="h-3 max-w-56" />
-                    </div>
-                </div>
-            )}
-
-            <DetailsCard
-                chatId={chatId}
-                isExpanded={isDetailsPanelExpanded}
-                onExpandedChanged={onExpandDetailsPanel}
-                isThinking={isThinking}
-                isStreaming={isStreaming}
-                thinkingSteps={uiVisibleThinkingSteps}
-                metadata={assistantMessage?.metadata}
-            />
-
-            {(answerPart && assistantMessage) ? (
-                <AnswerCard
-                    ref={answerRef}
-                    answerText={answerPart.text}
-                    chatId={chatId}
-                    messageId={assistantMessage.id}
-                    traceId={assistantMessage.metadata?.traceId}
-                />
-            ) : !isStreaming && (
-                <p className="text-destructive">Error: No answer response was provided</p>
-            )}
-        </div>
-    );
-
-    // Content for the references panel
-    const referencesPanelContent = (
-        <>
-            {referencedFileSources.length > 0 ? (
-                <ReferencedSourcesListView
-                    index={index}
-                    references={references}
-                    sources={referencedFileSources}
-                    hoveredReference={hoveredReference}
-                    selectedReference={selectedReference}
-                    onSelectedReferenceChanged={setSelectedReference}
-                    onHoveredReferenceChanged={setHoveredReference}
-                    style={shouldUseVerticalLayout || isReferencePanelCollapsed ? {} : rightPanelStyle}
-                />
-            ) : isStreaming ? (
-                <div className="space-y-4">
-                    {Array.from({ length: 3 }).map((_, index) => (
-                        <Skeleton key={index} className="w-full h-48" />
-                    ))}
-                </div>
-            ) : (
-                <div className="p-4 text-center text-muted-foreground text-sm">
-                    No file references found
-                </div>
-            )}
-        </>
-    );
-
-    // Layout toggle button for narrow containers
-    const layoutToggleButton = referencedFileSources.length > 0 && (
-        <Tooltip>
-            <TooltipTrigger asChild>
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 p-0"
-                    onClick={() => setIsReferencePanelCollapsed(!isReferencePanelCollapsed)}
-                >
-                    {isReferencePanelCollapsed ? (
-                        <PanelLeft className="h-4 w-4" />
-                    ) : (
-                        <PanelLeftClose className="h-4 w-4" />
-                    )}
-                </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-                {isReferencePanelCollapsed ? 'Show code references' : 'Hide code references'}
-            </TooltipContent>
-        </Tooltip>
-    );
-
-    // Vertical layout for narrow containers
-    if (shouldUseVerticalLayout) {
-        return (
-            <div
-                className="flex flex-col relative"
-                ref={(node) => {
-                    // Handle both refs
-                    containerRef.current = node;
-                    if (typeof ref === 'function') {
-                        ref(node);
-                    } else if (ref) {
-                        ref.current = node;
-                    }
-                }}
-            >
-                {/* Answer panel with toggle button */}
-                <div className="relative">
-                    {referencedFileSources.length > 0 && (
-                        <div className="absolute top-4 right-0 z-10">
-                            {layoutToggleButton}
-                        </div>
-                    )}
-                    {answerPanelContent}
-                </div>
-
-                {/* References panel - collapsible in vertical layout */}
-                {!isReferencePanelCollapsed && referencedFileSources.length > 0 && (
-                    <div className="border-t pt-4 mt-4">
-                        <div className="text-sm font-medium text-muted-foreground mb-3">Code References</div>
-                        <div className="max-h-[50vh] overflow-y-auto">
-                            {referencesPanelContent}
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    // Horizontal layout for wider containers
     return (
         <div
-            className="flex flex-col relative min-h-[calc(100vh-250px)]"
-            ref={(node) => {
-                // Handle both refs
-                containerRef.current = node;
-                if (typeof ref === 'function') {
-                    ref(node);
-                } else if (ref) {
-                    ref.current = node;
-                }
-            }}
+            className="flex flex-col md:flex-row relative min-h-[calc(100vh-250px)]"
+            ref={ref}
         >
             <ResizablePanelGroup
                 direction="horizontal"
@@ -503,42 +319,103 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
             >
                 <ResizablePanel
                     order={1}
-                    minSize={isReferencePanelCollapsed ? 100 : 30}
-                    maxSize={isReferencePanelCollapsed ? 100 : 70}
-                    defaultSize={isReferencePanelCollapsed ? 100 : 50}
+                    minSize={20}
+                    maxSize={80}
+                    defaultSize={50}
                     style={{
                         overflow: 'visible',
                     }}
                 >
-                    <div className="relative">
-                        {referencedFileSources.length > 0 && (
-                            <div className="absolute top-4 right-0 z-10">
-                                {layoutToggleButton}
+                    <div
+                        ref={leftPanelRef}
+                        className="py-4 h-full"
+                    >
+                        <div className="flex flex-row gap-2 mb-4">
+                            {isStreaming ? (
+                                <Loader2 className="w-4 h-4 animate-spin flex-shrink-0 mt-1.5" />
+                            ) : (
+                                <CheckCircle className="w-4 h-4 text-green-700 flex-shrink-0 mt-1.5" />
+                            )}
+                            <MarkdownRenderer
+                                content={userQuestion.trim()}
+                                className="prose-p:m-0"
+                                escapeHtml={true}
+                            />
+                        </div>
+
+                        {isThinking && (
+                            <div className="space-y-4 mb-4">
+                                <Skeleton className="h-4 max-w-32" />
+                                <div className="space-y-2">
+                                    <Skeleton className="h-3 max-w-72" />
+                                    <Skeleton className="h-3 max-w-64" />
+                                    <Skeleton className="h-3 max-w-56" />
+                                </div>
                             </div>
                         )}
-                        {answerPanelContent}
+
+                        <DetailsCard
+                            chatId={chatId}
+                            isExpanded={isDetailsPanelExpanded}
+                            onExpandedChanged={onExpandDetailsPanel}
+                            isThinking={isThinking}
+                            isStreaming={isStreaming}
+                            thinkingSteps={uiVisibleThinkingSteps}
+                            metadata={assistantMessage?.metadata}
+                        />
+
+                        {(answerPart && assistantMessage) ? (
+                            <AnswerCard
+                                ref={answerRef}
+                                answerText={answerPart.text}
+                                chatId={chatId}
+                                messageId={assistantMessage.id}
+                                traceId={assistantMessage.metadata?.traceId}
+                            />
+                        ) : !isStreaming && (
+                            <p className="text-destructive">Error: No answer response was provided</p>
+                        )}
                     </div>
                 </ResizablePanel>
-                {!isReferencePanelCollapsed && (
-                    <>
-                        <AnimatedResizableHandle className='mx-4' />
-                        <ResizablePanel
-                            order={2}
-                            minSize={30}
-                            maxSize={70}
-                            defaultSize={50}
-                            style={{
-                                overflow: 'clip',
-                                maxHeight: '100%',
-                                minWidth: 0,
-                            }}
-                        >
-                            <div className="sticky top-0">
-                                {referencesPanelContent}
+                <AnimatedResizableHandle className='mx-4' />
+                <ResizablePanel
+                    order={2}
+                    minSize={20}
+                    maxSize={80}
+                    defaultSize={50}
+                    style={{
+                        overflow: 'clip',
+                        maxHeight: '100%',
+                        minWidth: 0,
+                    }}
+                >
+                    <div
+                        className="sticky top-0"
+                    >
+                        {referencedFileSources.length > 0 ? (
+                            <ReferencedSourcesListView
+                                index={index}
+                                references={references}
+                                sources={referencedFileSources}
+                                hoveredReference={hoveredReference}
+                                selectedReference={selectedReference}
+                                onSelectedReferenceChanged={setSelectedReference}
+                                onHoveredReferenceChanged={setHoveredReference}
+                                style={rightPanelStyle}
+                            />
+                        ) : isStreaming ? (
+                            <div className="space-y-4">
+                                {Array.from({ length: 3 }).map((_, index) => (
+                                    <Skeleton key={index} className="w-full h-48" />
+                                ))}
                             </div>
-                        </ResizablePanel>
-                    </>
-                )}
+                        ) : (
+                            <div className="p-4 text-center text-muted-foreground text-sm">
+                                No file references found
+                            </div>
+                        )}
+                    </div>
+                </ResizablePanel>
             </ResizablePanelGroup>
         </div>
     )
@@ -588,4 +465,4 @@ const getNearestReferenceElement = (referenceElements: Element[]) => {
 
         return currentDistance < nearestDistance ? current : nearest;
     });
-}
\ No newline at end of file
+}

From b2dce15f70c77febcd08cd55b81d3dc6a4b46436 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Apr 2026 21:05:25 +0000
Subject: [PATCH 4/4] chore: update changelog entry for simplified fix

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 889534ad4..15f0c2065 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Fixed
-- Fixed Ask view layout becoming unusable in narrow/split window mode by adding automatic vertical layout switching and a toggle button to collapse/expand code references. [#1107](https://github.com/sourcebot-dev/sourcebot/pull/1107)
+- Fixed Ask view layout becoming unusable in narrow/split window mode by reducing panel minimum sizes to allow better resizing. [#1107](https://github.com/sourcebot-dev/sourcebot/pull/1107)
 
 ## [4.16.8] - 2026-04-09