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

packages/components/src/components/Navigation/Navigation.module.scss

@@ -1,8 +1,10 @@
 @use "@/styles/mixins/menuItem";
+@use "@/styles/mixins/ellipsis";
 
 .navigation {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 
   ul {
     display: flex;
@@ -17,18 +19,24 @@
   .item {
     @include menuItem.menuItem();
 
-    flex-wrap: wrap;
-
     > .icon {
       order: 0;
+      flex-shrink: 0;
     }
 
     > :not(.icon) {
       order: 1;
     }
 
+    > :not(.icon, .badge) {
+      @include ellipsis.ellipsis;
+
+      min-width: 0;
+    }
+
     .badge {
       margin-inline-start: auto;
+      flex-shrink: 0;
     }
   }
 

packages/components/src/components/Navigation/Navigation.tsx

@@ -1,21 +1,38 @@
-import type { ComponentProps, PropsWithChildren } from "react";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
+import { Children, isValidElement } from "react";
 import styles from "./Navigation.module.scss";
 import clsx from "clsx";
-import { PropsContextProvider } from "@/lib/propsContext";
+import { dynamic, PropsContextProvider } from "@/lib/propsContext";
 import type { PropsWithClassName } from "@/lib/types/props";
 import {
   flowComponent,
   type FlowComponentProps,
 } from "@/lib/componentFactory/flowComponent";
 import type { ComponentPropsContext } from "@/lib/propsContext/types";
 import { LinkListTunnelExit } from "@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit";
+import { isRemoteTextRenderProps } from "@/lib/react/remote";
 
 export interface NavigationProps
   extends
     PropsWithChildren<ComponentProps<"nav">>,
     PropsWithClassName,
     FlowComponentProps<HTMLElement> {}
 
+/** 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,
+  );
+
 /** @flr-generate all */
 export const Navigation = flowComponent("Navigation", (props) => {
   const { className, children, ref, ...rest } = props;
@@ -26,6 +43,7 @@ export const Navigation = flowComponent("Navigation", (props) => {
     wrapWith: <li />,
     className: styles.item,
     unstyled: true,
+    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),
     Icon: {
       className: styles.icon,
       size: "m",

packages/remote-react-components/src/tests/visual/Navigation.browser.test.tsx

@@ -76,19 +76,25 @@ test.each(testEnvironments)(
       Badge,
       IconStar,
       Text,
+      Truncate,
     },
   }) => {
     await render(
       <ColumnLayout m={[1, 1, 1, 1, 1, 1]}>
         <Navigation>
           <Link>
-            Galactic Empire<AlertBadge status="warning">Deprecated</AlertBadge>
+            Galactic Empire of the Outer Rim
+            <AlertBadge status="warning">Deprecated</AlertBadge>
           </Link>
           <Link>
             <IconStar />
-            <Text>Rebel Alliance</Text>
+            <Text>Rebel Alliance High Command</Text>
             <Badge>Neu</Badge>
           </Link>
+          <Link>
+            <IconStar />
+            <Truncate>Mandalorian Covert of Nevarro</Truncate>
+          </Link>
         </Navigation>
       </ColumnLayout>,
     );