fix(ui): contain long mega menu labels

packages/ui/components/MegaMenu.wrn

@@ -462,8 +462,14 @@ component MegaMenu {
       list-style: none;
     }
 
+    .wrn-mega__list > li {
+      min-width: 0;
+    }
+
     .wrn-mega__link {
       display: flex;
+      width: 100%;
+      min-width: 0;
       align-items: flex-start;
       gap: 0.5rem;
       padding: 0.45rem 0.5rem;
@@ -537,6 +543,7 @@ component MegaMenu {
     .wrn-mega__link-label {
       font-size: 0.88rem;
       font-weight: 600;
+      overflow-wrap: anywhere;
     }
 
     .wrn-mega__link-description {

packages/ui/test/ui.test.ts

@@ -2980,6 +2980,8 @@ test("mega menu columns take roving focus and survive an empty column list", asy
 
 test("catalog mega menu renders only the active rail category", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
+  expect(source).toContain(".wrn-mega__list > li");
+  expect(source).toContain("overflow-wrap: anywhere;");
   const html = await renderComponent(source, {
     label: "Products",
     variant: "catalog",