Skip to content

Wrap long get-started commands instead of clipping them - #4623

Merged
leemthompo merged 1 commit into
mainfrom
leemthompo/get-started-wrap-long-commands
Oct 29, 2026
Merged

leemthompo merged 1 commit into
mainfrom
leemthompo/get-started-wrap-long-commands

Conversation

@leemthompo

@leemthompo leemthompo commented Oct 28, 2026 •

Copy link
Copy Markdown
Member

Long commands in a {get-started} option now wrap instead of being cut off, so readers see the whole command.

Affects: Site UI

Why

The command chip has a fixed height and scrolls sideways, so a long command loses its end with no sign that it continues.

What

The chip grows to fit its content and the command wraps. A one-line command keeps the chip's 37px height. The design-system hub layout already wraps commands.

Check on the preview

  • Elasticsearch hub — the start-local command in Run locally wraps and shows the final | sh.
  • Kibana hub — same command, wrapped in the same way.
  • Logstash hub — control page: no command chip, layout unchanged.

Related: #4622 includes this change.

Screenshots

Before: a long command is cut off A get-started command chip cut off partway through the command
After: the same command wraps onto two lines The same get-started command chip, wrapped onto two lines

🤖 Generated with Claude Code

The command chip had a fixed height and no wrapping, so a long command
lost its end on hub pages. The Elasticsearch hub shows its start-local
command without the final `| sh`.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@leemthompo leemthompo added the bug label Oct 28, 2026
@leemthompo
leemthompo marked this pull request as ready for review October 28, 2026 11:51
@leemthompo
leemthompo requested a review from a team as a code owner October 28, 2026 11:51
@leemthompo
leemthompo requested a review from theletterf October 28, 2026 11:51
@leemthompo leemthompo self-assigned this Oct 28, 2026
Comment on lines +244 to +245
white-space: pre-wrap;
overflow-wrap: anywhere;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Severity: P3 (Low)

The wrapping fix has no automated layout regression coverage. The existing get-started option tests only check emitted HTML, so they would still pass if commands became clipped again. Add a browser-level case with a long command and an unbroken URL in a constrained column, plus a short-command control that verifies the 37px height.

Generated by Libra. React with 👍 or 👎 to give feedback on this comment.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No existing browser-level layout test harness to extend here, so I'll leave this to the visual checks rather than add one for a single CSS rule.

@github-actions

Copy link
Copy Markdown
Contributor

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4623/

@leemthompo
leemthompo merged commit 9e802a8 into main Oct 29, 2026
47 checks passed
@leemthompo
leemthompo deleted the leemthompo/get-started-wrap-long-commands branch October 29, 2026 14:33
alexandra5000 pushed a commit to alexandra5000/docs-content that referenced this pull request Oct 29, 2026
…hub (elastic#9073)

## Summary

Many search use cases don't need Kibana, so the **Run locally** option
on the [Elasticsearch
hub](https://www.elastic.co/docs/products/elasticsearch) now gives the
Elasticsearch-only command:

```sh
curl -fsSL https://elastic.co/start-local | sh -s -- --esonly
```

The description tells readers to delete the `--esonly` flag to also run
Kibana. The flag is documented in the [start-local
README](https://github.com/elastic/start-local#install-only-elasticsearch).

## Dependency 


[elastic/docs-builder#4623](elastic/docs-builder#4623).
Until this gets picked up in a docs release, the hub's command box cuts
off long commands, so readers can't see `| sh -s --esonly`.




## Generative AI disclosure

1. Did you use a generative AI (GenAI) tool to assist in creating this
contribution?
- [x] Yes
- [ ] No

Tool(s) and model(s) used: Claude Code, Claude Opus 5.5

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants