fix(ld-sidenav): truncate long words in nav header

screenshot/builds/master.json

@@ -19504,6 +19504,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "4df0ed6a",
+      "image": "8513cd52278926a95d7b2299296d9087.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav header truncates text in header",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "171fb2c3",
       "image": "0ec4bccd78c16f24b8352b0a15f2934b.png",

src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.shadow.css

@@ -46,7 +46,8 @@
   outline-offset: var(--ld-sidenav-navitem-bg-inset);
   position: relative;
   text-decoration: none;
-  transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
+  transition:
+    opacity var(--ld-sidenav-transition-duration-collapse-expand)
       var(--ld-sidenav-transition-delay-collapse-expand) linear,
     transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
 
@@ -107,7 +108,8 @@
   :host(.ld-sidenav-header--closed) &,
   :host(.ld-sidenav-header--collapsed) & {
     transform: translateX(var(--ld-sidenav-translate-x-delta));
-    transition: visibility 0s
+    transition:
+      visibility 0s
         calc(
           var(--ld-sidenav-transition-duration-collapse-expand) +
             var(--ld-sidenav-transition-delay-collapse-expand)
@@ -150,8 +152,8 @@
   place-content: center;
   touch-action: manipulation;
   transform: translateX(var(--ld-sp-6));
-  transition: transform var(--ld-sidenav-transition-duration-collapse-expand)
-      ease,
+  transition:
+    transform var(--ld-sidenav-transition-duration-collapse-expand) ease,
     opacity var(--ld-sidenav-transition-duration-collapse-expand) linear;
   width: var(--ld-sidenav-navitem-icon-size);
   will-change: transform; /* fixes rendering issue */
@@ -210,7 +212,8 @@
 
   :host(.ld-sidenav-header--closed) &,
   :host(.ld-sidenav-header--collapsed-fully) & {
-    transition: visibility 0s
+    transition:
+      visibility 0s
         calc(2 * var(--ld-sidenav-transition-duration-collapse-expand)) linear,
       transform var(--ld-sidenav-transition-duration-collapse-expand) ease,
       opacity calc(var(--ld-sidenav-transition-duration-collapse-expand) * 0.5)
@@ -253,11 +256,12 @@
 
 .ld-sidenav-header__slot-wrapper {
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   display: -webkit-box;
   max-height: var(--ld-sidenav-header-height); /* required in Safari */
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  word-break: break-word;
   z-index: 2;
 }

src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts

@@ -980,6 +980,22 @@ describe('ld-sidenav', () => {
       const result = await page.compareScreenshot()
       expect(result).toMatchScreenshot()
     })
+
+    it('truncates text in header', async () => {
+      const page = await getPageWithContent(
+        `
+        <ld-sidenav open collapsible narrow>
+          <ld-sidenav-header href="#" slot="header">
+            A title which is super long and should be truncated, because it is too long.
+          </ld-sidenav-header>
+        </ld-sidenav>`,
+        { reducedMotion: true }
+      )
+      page.waitForChanges()
+
+      const result = await page.compareScreenshot()
+      expect(result).toMatchScreenshot()
+    })
   })
 
   describe('stacking', () => {