From 3420804d4856bfbabb8bd6ecfc5d617e1a008394 Mon Sep 17 00:00:00 2001 From: Rodrigo Barona Date: Mon, 19 Oct 2026 21:36:27 +0100 Subject: [PATCH] Dato Agent: give the inspector chat a usable starting width The Agent tab reserved all but 420px for the record pane, so the chat opened as a narrow column beside an empty pane. Start from a balanced split, keep both panes usable, and center the conversation. Co-authored-by: Cursor --- .../src/components/AgentSurface.module.css | 4 ++-- .../InspectorEmptyPanel.module.css | 6 ++++++ .../src/entrypoints/InspectorEmptyPanel.tsx | 4 ++++ dato-agent/src/lib/inspectorLayout.test.ts | 20 +++++++++++-------- dato-agent/src/lib/inspectorLayout.ts | 16 ++++++++++----- dato-agent/src/main.tsx | 6 +++--- 6 files changed, 38 insertions(+), 18 deletions(-) diff --git a/dato-agent/src/components/AgentSurface.module.css b/dato-agent/src/components/AgentSurface.module.css index 860a527a..2fa1b089 100644 --- a/dato-agent/src/components/AgentSurface.module.css +++ b/dato-agent/src/components/AgentSurface.module.css @@ -485,7 +485,7 @@ .transcriptInner { box-sizing: border-box; - width: 100%; + width: min(100%, 760px); min-height: 100%; margin: 0 auto; padding: 14px 14px 18px; @@ -1125,7 +1125,7 @@ .composerInner { box-sizing: border-box; - width: 100%; + width: min(100%, 760px); margin: 0 auto; padding: 10px 14px 12px; } diff --git a/dato-agent/src/entrypoints/InspectorEmptyPanel.module.css b/dato-agent/src/entrypoints/InspectorEmptyPanel.module.css index 66faf449..12d48e81 100644 --- a/dato-agent/src/entrypoints/InspectorEmptyPanel.module.css +++ b/dato-agent/src/entrypoints/InspectorEmptyPanel.module.css @@ -10,7 +10,13 @@ } .empty p { + max-width: 36ch; margin: 0; color: var(--color--ink-subtle); font-size: var(--font-size-m); } + +.empty p + p { + margin-top: var(--spacing-s); + font-size: var(--font-size-s); +} diff --git a/dato-agent/src/entrypoints/InspectorEmptyPanel.tsx b/dato-agent/src/entrypoints/InspectorEmptyPanel.tsx index 9abd1313..b2dd0e6f 100644 --- a/dato-agent/src/entrypoints/InspectorEmptyPanel.tsx +++ b/dato-agent/src/entrypoints/InspectorEmptyPanel.tsx @@ -11,6 +11,10 @@ export default function InspectorEmptyPanel({ ctx }: Props) {

Records will open here

+

+ Ask the agent to open a record and it appears in this pane. Drag the + divider to resize it. +

); diff --git a/dato-agent/src/lib/inspectorLayout.test.ts b/dato-agent/src/lib/inspectorLayout.test.ts index c7660dc8..b3523a90 100644 --- a/dato-agent/src/lib/inspectorLayout.test.ts +++ b/dato-agent/src/lib/inspectorLayout.test.ts @@ -3,22 +3,26 @@ import { inspectorRecordPaneWidth } from './inspectorLayout'; describe('inspectorRecordPaneWidth', () => { it.each([ - [1710, 1290], - [1440, 1020], - [1280, 860], + [1710, 770], + [1440, 648], + [1280, 576], ])( - 'keeps a compact 420px agent beside a %ipx browser', + 'gives the record pane about 45% of a %ipx browser', (browserWidth, expected) => { expect(inspectorRecordPaneWidth(browserWidth)).toBe(expected); }, ); - it('preserves the CMS minimum record width on a narrow browser', () => { - expect(inspectorRecordPaneWidth(800)).toBe(550); + it('keeps the chat usable when 45% would leave the record too narrow', () => { + expect(inspectorRecordPaneWidth(1200)).toBe(560); + }); + + it('splits a narrow browser evenly', () => { + expect(inspectorRecordPaneWidth(800)).toBe(400); }); it('uses a desktop fallback when browser sizing is unavailable', () => { - expect(inspectorRecordPaneWidth(undefined)).toBe(1020); - expect(inspectorRecordPaneWidth(Number.NaN)).toBe(1020); + expect(inspectorRecordPaneWidth(undefined)).toBe(648); + expect(inspectorRecordPaneWidth(Number.NaN)).toBe(648); }); }); diff --git a/dato-agent/src/lib/inspectorLayout.ts b/dato-agent/src/lib/inspectorLayout.ts index b2335eda..fb880438 100644 --- a/dato-agent/src/lib/inspectorLayout.ts +++ b/dato-agent/src/lib/inspectorLayout.ts @@ -1,6 +1,6 @@ const FALLBACK_BROWSER_WIDTH = 1440; -const MINIMUM_RECORD_PANE_WIDTH = 550; -const TARGET_AGENT_PANE_WIDTH = 420; +const MINIMUM_PANE_WIDTH = 560; +const RECORD_PANE_SHARE = 0.45; export function inspectorRecordPaneWidth( browserOuterWidth: number | undefined, @@ -12,8 +12,14 @@ export function inspectorRecordPaneWidth( ? browserOuterWidth : FALLBACK_BROWSER_WIDTH; - return Math.max( - MINIMUM_RECORD_PANE_WIDTH, - Math.round(browserWidth - TARGET_AGENT_PANE_WIDTH), + // A window too small for two usable panes is split evenly. Otherwise the + // record pane starts at about 45% and neither pane drops below the floor. + if (browserWidth < MINIMUM_PANE_WIDTH * 2) { + return Math.round(browserWidth / 2); + } + + return Math.min( + Math.max(Math.round(browserWidth * RECORD_PANE_SHARE), MINIMUM_PANE_WIDTH), + browserWidth - MINIMUM_PANE_WIDTH, ); } diff --git a/dato-agent/src/main.tsx b/dato-agent/src/main.tsx index 08592350..08823c06 100644 --- a/dato-agent/src/main.tsx +++ b/dato-agent/src/main.tsx @@ -57,9 +57,9 @@ if (!handledOAuthCallback) { placement: ['before', 'content'], pointsTo: { inspectorId: 'dato-agent', - // Inspector tabs render the CMS record in the right-hand secondary - // pane, so this value deliberately reserves most of the viewport - // for the record and leaves the agent as a compact companion. + // The inspector always shows a right-hand pane and only reads this + // width once. Start with a balanced split so the chat is usable + // before a record is opened; the editor can drag the divider. preferredWidth: inspectorRecordPaneWidth(window.outerWidth), initialInspectorPanel: { panelId: 'dato-agent-empty',