fix(ui): contain long mega menu labels

2026-08-25 19:33:59 +05:30
parent decbee2fd1
commit c648efc240
2 changed files with 9 additions and 0 deletions
@@ -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 {
@@ -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",