[Agent Builder] Decrease base font sizes in chat UI. by ryankeairns · Pull Request #283254 · elastic/kibana

ryankeairns · 2026-08-05T23:22:15Z

Summary

Tighten Agent Builder chat typography and spacing so the conversation UI feels more consistent with the rest of Kibana.

Changes

Reduce chat message and markdown text from m to s
Reduce composer/editor font size from m to s
Shrink conversation header height (88 → 64) and more-actions button size (m → s)
Use smaller control sizes for input popover buttons and round metadata trigger (xs)
Tighten round response/input spacing and padding
Align thinking/tool-call step layout, expansion chevrons, and copy (drop trailing periods)
Simplify to-dos header and adjust its padding/type size
fix: Use canvas-specific attachment header radius (0 4px 0 0)
fix: Remove sidebar right border; minor connector selector and new-conversation prompt tweaks

Screenshots

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

Co-authored-by: Cursor <cursoragent@cursor.com>

…copy change. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

…tatus text. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns · 2026-08-10T22:54:51Z

      : euiTheme.colors.backgroundBasePlain};
    min-height: ${isCollapsed ? '0' : INPUT_MIN_HEIGHT};
-    padding: ${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.s} ${euiTheme.size.base};
+    padding: ${euiTheme.size.base};


Evens out the padding in the conversation input.

ryankeairns · 2026-08-10T22:55:09Z

        closePopover={closePopover}
-        panelPaddingSize="xs"
-        anchorPosition="downCenter"
+        panelPaddingSize="none"


This was causing double padding

ryankeairns · 2026-08-10T22:58:24Z

 import {
  EuiBadge,
-  EuiButtonEmpty,
+  EuiButton,


Results in a bordered button which looks better at full-width than the prior empty button (label floating in center of footer).

ryankeairns · 2026-08-10T23:01:09Z


 describe('ToolCallGroup', () => {
-  it('shows "N tools ran." once every step in the group has a result', () => {
+  it('shows "N tools ran" once every step in the group has a result', () => {


Opinionated change :)
I felt the periods were unnecessary and, visually, it looks better to remove them.

ryankeairns · 2026-08-10T23:02:04Z

    </EuiText>
  );

-  const expansionStyles = css`


The extra padding make for an awkward alignment. Now flush left like other tool calls.

ryankeairns · 2026-08-10T23:03:04Z

        responsive={false}
        gutterSize="xs"
-        alignItems="center"
+        alignItems="baseline"


With the smaller font sizes, this makes for better vertical alignment between badge and adjacent text.

ryankeairns · 2026-08-10T23:03:41Z


  return (
-    <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="agentBuilderThinkingPanel">
+    <EuiFlexGroup direction="column" data-test-subj="agentBuilderThinkingPanel">


Add some vertical spacing in this section now that the font size is smaller; make it less dense.

ryankeairns · 2026-08-10T23:04:10Z

          <EuiFlexItem grow={false}>
            <EuiIcon
-              type={isExpanded ? 'arrowUp' : 'arrowDown'}
+              type={isExpanded ? 'chevronSingleDown' : 'chevronSingleRight'}


Prefer arrow to point down when open/expanded and right when closed/collapsed.

ryankeairns · 2026-08-10T23:04:50Z

      onClosePreview={action('close preview')}
    />
-    <EuiSplitPanel.Inner grow={false} paddingSize="none">
+    <EuiSplitPanel.Inner


UI bug; mismatched border-radius between container and content.

ryankeairns · 2026-08-10T23:05:38Z

    text-overflow: ellipsis;
  `;

+  const headerBorderRadius = isCanvas


UI bug. When showing the attachment UI in the canvas, the header should not have a bottom border radius.

ryankeairns · 2026-08-10T23:06:48Z

    ol > li > p {
      margin-bottom: ${euiTheme.size.s};
    }
+


This probably needs to be fixed/changed in EUI, but it helps here in the meantime. Feedback in the Slack channel notes that the bullet lists - within responses - were vertically crowded.

ryankeairns · 2026-08-10T23:07:12Z

    <EuiButtonEmpty
      iconType="clock"
-      size="s"
+      size="xs"


Made smaller to match size of adjacent buttons

ryankeairns · 2026-08-10T23:08:30Z

  return (
    <EuiFlexGroup
-      direction="row"
+      direction="rowReverse"


Move button group to right edge. I felt this improves scanability down the left side of the chat by having one less thing over there. Also, seems like a more natural, common position for such actions (see Cursor).

ryankeairns · 2026-08-10T23:09:45Z

 import type { EuiThemeComputed } from '@elastic/eui';

-export const headerHeight = 88;
+export const headerHeight = 64;


Decrease to match height of side menu header.

kibanamachine · 2026-08-10T23:40:34Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 8ae24dc
Storybooks Preview
Build duration: 51 mins

Failed CI Steps

Test Failures

[job] [logs] Scout Lane #59 - serverless-observability_complete / default / local-serverless-observability_complete - Observability Landing Page - redirects to APM services when only APM data exists
[job] [logs] Scout Lane #59 - serverless-observability_complete / default / local-serverless-observability_complete - Observability Landing Page - redirects to onboarding when log data that should be ignored exists
[job] [logs] Scout Lane #59 - serverless-observability_complete / default / local-serverless-observability_complete - Observability Landing Page - redirects to onboarding when no data exists
[job] [logs] Jest Integration Tests #5 / workflow with wait step when duration is short should have correct workflow duration

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`shared-packages`	4.2MB	4.2MB	-42.0B
`shared-plugins`	11.8MB	11.8MB	+264.0B
total			+222.0B

Unknown metric groups

shared async chunks total size

id	before	after	diff
`all`	14.5MB	14.5MB	-87.0B

total optimizer output size

id	before	after	diff
`all`	61.5MB	61.5MB	+135.0B

History

💛 Build #482734 was flaky 53b8df1
💛 Build #482682 was flaky f5d67da
💛 Build #482162 was flaky b7af16c
💔 Build #482155 failed 3a9bd5e
💔 Build #482150 failed 32c6d4c
💔 Build #482127 failed 1efa77d

## Summary Tighten Agent Builder chat typography and spacing so the conversation UI feels more consistent with the rest of Kibana. ## Changes - Reduce chat message and markdown text from `m` to `s` - Reduce composer/editor font size from `m` to `s` - Shrink conversation header height (`88` → `64`) and more-actions button size (`m` → `s`) - Use smaller control sizes for input popover buttons and round metadata trigger (`xs`) - Tighten round response/input spacing and padding - Align thinking/tool-call step layout, expansion chevrons, and copy (drop trailing periods) - Simplify to-dos header and adjust its padding/type size - fix: Use canvas-specific attachment header radius (`0 4px 0 0`) - fix: Remove sidebar right border; minor connector selector and new-conversation prompt tweaks ##### Screenshots <img width="3172" height="1930" alt="CleanShot 2026-08-06 at 10 58 26@2x" src="https://github.com/user-attachments/assets/62b87ff8-580b-4d12-abba-6bd3326acd45" /> <img width="3172" height="1930" alt="CleanShot 2026-08-06 at 10 57 47@2x" src="https://github.com/user-attachments/assets/b41de9dc-97d4-4a85-91cf-25625588eca4" /> <img width="3172" height="1930" alt="CleanShot 2026-08-06 at 11 00 02@2x" src="https://github.com/user-attachments/assets/943e7575-52af-44fc-b272-3c5aeed7ea73" /> <img width="3172" height="1930" alt="CleanShot 2026-08-06 at 11 16 05@2x" src="https://github.com/user-attachments/assets/051923cb-aa53-42eb-8188-5a5c9e5265df" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/docs/extend/kibana/contributing/workflow/how-we-use-github#release-notes) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

[Agent Builder] Decrease base font sizes in chat UI.

f1f29c9

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns commented Aug 6, 2026

View reviewed changes

Comment thread ...shared/agent_builder/public/application/components/conversations/new_conversation_prompt.tsx Outdated

ryankeairns added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.6.0 labels Aug 6, 2026

ryankeairns and others added 2 commits August 6, 2026 08:44

Remove title weight override

c7b4bf1

[Agent Builder] Increase chat markdown list item line-height to 24px.

2f3a15d

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from 613fe65 to 2f3a15d Compare August 6, 2026 17:55

[Agent Builder] Fix inline attachment card border-radius mismatches.

708c54f

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from dc8449f to 92a22f7 Compare August 6, 2026 19:02

[Agent Builder] Clean up more-actions menu padding and anchor.

d67c4c9

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from 92a22f7 to d67c4c9 Compare August 6, 2026 19:04

ryankeairns marked this pull request as ready for review August 6, 2026 19:05

ryankeairns requested a review from a team as a code owner August 6, 2026 19:05

[Agent Builder] Fix type errors and update tests for trailing-period …

b8a96fd

…copy change. Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from 1efa77d to b8a96fd Compare August 6, 2026 20:25

[Agent Builder] Remove unused EuiSpacer import.

8a2f21c

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from 03056cf to 8a2f21c Compare August 6, 2026 20:39

[Agent Builder] Fix tool call group test assertion for concatenated s…

42c73ca

…tatus text. Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns force-pushed the rk/ab-font-sizes branch from 3a9bd5e to 42c73ca Compare August 6, 2026 21:12

Changes from node scripts/check

b7af16c

kibanamachine added the reviewer:scout Agentic PR Scout test review label Aug 6, 2026

ryankeairns enabled auto-merge (squash) August 7, 2026 00:29

ryankeairns requested a review from julianrosado August 7, 2026 04:33

ryankeairns and others added 4 commits August 7, 2026 11:13

Merge branch 'main' into rk/ab-font-sizes

3444ef9

Merge branch 'main' into rk/ab-font-sizes

f5d67da

Merge branch 'main' into rk/ab-font-sizes

53b8df1

Merge branch 'main' into rk/ab-font-sizes

8ae24dc

Co-authored-by: Cursor <cursoragent@cursor.com>

ryankeairns commented Aug 10, 2026

View reviewed changes

SiddharthMantri approved these changes Aug 11, 2026

View reviewed changes

ryankeairns merged commit 5b90124 into main Aug 11, 2026
38 checks passed

ryankeairns deleted the rk/ab-font-sizes branch August 11, 2026 04:39

ryankeairns added the design-only Can be handled solely by a design team member label Aug 19, 2026

Uh oh!

Conversation

ryankeairns commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Screenshots

Checklist

Identify risks

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Aug 10, 2026

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Page load bundle

shared async chunks total size

total optimizer output size

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ryankeairns commented Aug 5, 2026 •

edited

Loading