Skip to content

Place the API spec menu below its trigger - #4280

Merged
reakaleek merged 1 commit into
mainfrom
api-catalog-spec-flyout
Oct 5, 2026
Merged

reakaleek merged 1 commit into
mainfrom
api-catalog-spec-flyout

Conversation

@reakaleek

@reakaleek reakaleek commented Oct 1, 2026 •

Copy link
Copy Markdown
Member

Assembler preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/docs/4280/api/doc/cloud-connect

The API spec menu opens below the control that opened it, and it paints above the left nav and the page header.

Affects: Site UI, API reference

Prompt summary: Position the API spec-chooser flyout so the trigger stays visible, the menu stacks above the left nav and the page header, and Escape closes it and returns focus to the trigger.

Why

The spec menu shares its open travel with the tall top-bar tabs. That travel moves the panel up by 8px. The spec control is only as tall as its label, so the panel covers the bottom of the label. The panel's z-index also sits inside the grey bar, so the page header and the API sidebar paint over the menu.

Closes elastic/docs-eng-team#901

What

Spec menu placement

The spec menu and the download menu start below the label. After the open travel, the panel sits 4px under the control, so the label stays fully visible.

Stacking

While either menu is open, the grey bar paints above the API sidebar and the page header. Escape already closes these menus and returns focus to the trigger. That behavior is unchanged.

Verify

cd src/Elastic.Documentation.Site && npm run test
# initSecondaryNav — closes on Escape and returns focus to the summary

Open an API product page and open the spec menu. The label stays visible. The panel sits above the left nav and the page header. Escape closes the menu and focus returns to the label.

Out of scope. This PR does not add catalog display names, and it does not change property-tree chips, the examples panel, or OperationPageModel.

Made with Cursor

The open travel was tuned for a tall tab, so the spec menu covered its label and painted under the header and sidebar.

Co-Authored-By: Grok 4.7 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@reakaleek
reakaleek requested a review from a team as a code owner October 1, 2026 11:00
@reakaleek
reakaleek requested a review from theletterf October 1, 2026 11:00
@reakaleek reakaleek added the bug label Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

Docs preview (local build)

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

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Approved — no blocking issues found.


What is this? | From workflow: PR Review

Give us feedback! React with 🚀 if perfect, 👍 if helpful, 👎 if not.

@reakaleek

Copy link
Copy Markdown
Member Author

LGTM

image

@reakaleek
reakaleek requested a review from akira28 October 1, 2026 11:17
@reakaleek
reakaleek marked this pull request as draft October 1, 2026 11:53
@reakaleek
reakaleek marked this pull request as ready for review October 5, 2026 08:25
@reakaleek
reakaleek merged commit 220a5d2 into main Oct 5, 2026
43 checks passed
@reakaleek
reakaleek deleted the api-catalog-spec-flyout branch October 5, 2026 08:26
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.

1 participant