fix(Navigation): keep the badge in the item's line and truncate the label

[Lisa18289]

#2903 let a navigation item wrap so its badge could move to the next line. In a narrow navigation that wraps the label off its icon instead, so keep everything on one line and truncate the label.

A label passed as raw text is an anonymous flex item that no rule can reach — the link's props context wraps it in an element. Remote delivers text as a renderer element rather than a string, so that case is matched too; without it only Local truncated. min-width: 0 on the navigation is what makes truncation happen at all inside a flexible container: a 1fr grid track takes the content's min-content width as its minimum, so the navigation grew past its column instead of shrinking.

The narrow container visual scenario now uses labels that actually overflow — before, every label fit and the scenario could not have shown the difference — with and without a leading icon, plus a Truncate child (what mStudio passes).

Needs the update-screenshots label for the Linux baselines; only the -darwin ones can be written locally.

[github-actions]

Coverage Report for ./packages/components/

Status	Category	Percentage	Covered / Total
🔵	Lines	78.69%	746 / 948
🔵	Statements	78.57%	763 / 971
🔵	Functions	80.09%	165 / 206
🔵	Branches	70.33%	377 / 536

File Coverage

No changed files found.

Generated in workflow #6669 for commit 08926fb by the Vitest Coverage Report Action

[github-actions]

🚀 Preview Deployment

Preview environments are ready:

Type	URL
docs	pr-3070.docs.review.flow-components.de
storybook	pr-3070.storybook.review.flow-components.de

Images:

• docs: ghcr.io/mittwald/flow/docs:pr-3070
• storybook: ghcr.io/mittwald/flow/storybook:pr-3070

[github-actions]

❌ Visual Regression Tests Failed

At least one shard did not pass. If snapshots differ from the committed baselines, download the visual-diffs-* artifacts from this run to inspect the actual/diff images (a shard that failed before comparison, e.g. during install or browser setup, leaves none).

If the differences are intentional, update the baselines by adding the update-screenshots label to the PR.

Run details

[mfal]

isText duplicates a predicate two other open PRs also carry, and one of them already puts it in the right place.

• fix(Button): treat a string label like a Text child #3053 adds isTextNode + an exported containsTextChild to src/lib/react/remote.ts — same three branches, plus fragment recursion. (It misses number; I asked for that there so this PR can drop its helper without losing a case.)
• fix(Option): infer textValue from mixed children and keep value stable #3076 adds extractTextFromChildren to the same file, with the same classification inside its walk.

containsTextChild applied per child answers exactly the question here — containsTextChild("Galactic") is true, containsTextChild(<Badge/>) is false — so both local helpers collapse into one call:

Suggested change

	/** Text a link receives as a raw string, or as a remote text node. */
	const isText = (child: ReactNode): boolean =>
	typeof child === "string" ||
	typeof child === "number" ||
	(isValidElement(child) && isRemoteTextRenderProps(child.props));
	/**
	* A bare text node is an anonymous flex item that no rule can reach, so give
	* the label an element the item can truncate.
	*/
	const wrapTextInLabel = (children: ReactNode): ReactNode =>
	Children.map(children, (child) =>
	isText(child) ? <span>{child}</span> : child,
	);
	/**
	* A bare text node is an anonymous flex item that no rule can reach, so give
	* the label an element the item can truncate.
	*/
	const wrapTextInLabel = (children: ReactNode): ReactNode =>
	Children.map(children, (child) =>
	containsTextChild(child) ? <span>{child}</span> : child,
	);

Two imports follow: line 13 becomes import { containsTextChild } from "@/lib/react/remote";, and isValidElement on line 2 falls away (import { Children } from "react";).

Worth having beyond the deduplication: containsTextChild looks through fragments, so a label passed as <>{"Text"}</> gets wrapped and truncated too. isText returns false for that today.

No rendered output changes for the scenarios in this PR, so the committed baselines stay valid.

Order: this waits on #3053. If that one stalls, merging here as-is is fine — the duplication is then temporary and whichever of #3053/#3076 lands second cleans it up (those two conflict in remote.ts and need a rebase against each other anyway).

[Lisa18289]

Applied in 08926fb, after merging #3053's main in.

I first went down a wrong path here and want to record why, because it nearly cost this PR the change. I read containsTextChild as an aggregate over a whole subtree and concluded it could not answer a per-child question, so I exported isTextNode instead. That was wrong on both counts — and isTextNode is the one symbol #3076 removes, so it would have left this PR depending on something that disappears when yours lands. containsTextChild stays exported there.

Applied per child it is exactly right, verified:

child	result
"Galactic"	true
{42}	true
<Badge />	false
<Badge>New</Badge>	false
<>{"Text"}</>	true

The fourth line is the one I had doubted — text inside an element stays that element's, so it is not wrapped. And the fifth is the improvement you mentioned; the local helper returned false for it.

One note for when #3076 lands: your containsTextChild is extractTextFromChildren(children) !== undefined, which trims, so a whitespace-only child ({" "} between two elements) stops counting as text and no longer gets a <span>. That reads like the better behaviour to me — flagging it only because it is a silent change to this call site.

test:compile and lint clean, unit 253/253, the Navigation visual scenarios pass against the committed baselines unchanged.