From ef3f1e1337b7166b5cb3fd7594849fb0305d0391 Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Tue, 20 May 2025 16:34:56 +0200
Subject: [PATCH 1/2] feat(menu): Add ellipsis to cut long menu items

---
 src/components/sidebarTableOfContents/index.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebarTableOfContents/index.tsx b/src/components/sidebarTableOfContents/index.tsx
index 5b1cf57988393..cb30fcf014ca8 100644
--- a/src/components/sidebarTableOfContents/index.tsx
+++ b/src/components/sidebarTableOfContents/index.tsx
@@ -33,7 +33,18 @@ function recursiveRender(items: TocItem[]) {
           } as React.CSSProperties
         }
       >
-        <a href={`${i.url}`}>{i.title}</a>
+        <a
+          href={`${i.url}`}
+          style={{
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            display: 'block',
+          }}
+          title={i.title}
+        >
+          {i.title}
+        </a>
         {i.children && <ul>{recursiveRender(i.children)}</ul>}
       </li>
     );

From 473923a003d1d131af54fe8e1a812fd7cf5a402d Mon Sep 17 00:00:00 2001
From: s1gr1d <sigrid.huemer@posteo.at>
Date: Wed, 21 May 2025 09:39:07 +0200
Subject: [PATCH 2/2] add to styles - not inline

---
 src/components/sidebarTableOfContents/index.tsx     | 13 +------------
 .../sidebarTableOfContents/style.module.scss        |  4 ++++
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebarTableOfContents/index.tsx b/src/components/sidebarTableOfContents/index.tsx
index cb30fcf014ca8..5b1cf57988393 100644
--- a/src/components/sidebarTableOfContents/index.tsx
+++ b/src/components/sidebarTableOfContents/index.tsx
@@ -33,18 +33,7 @@ function recursiveRender(items: TocItem[]) {
           } as React.CSSProperties
         }
       >
-        <a
-          href={`${i.url}`}
-          style={{
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            display: 'block',
-          }}
-          title={i.title}
-        >
-          {i.title}
-        </a>
+        <a href={`${i.url}`}>{i.title}</a>
         {i.children && <ul>{recursiveRender(i.children)}</ul>}
       </li>
     );
diff --git a/src/components/sidebarTableOfContents/style.module.scss b/src/components/sidebarTableOfContents/style.module.scss
index e50a40cd94cd1..c8e9edaeb9c1a 100644
--- a/src/components/sidebarTableOfContents/style.module.scss
+++ b/src/components/sidebarTableOfContents/style.module.scss
@@ -18,6 +18,10 @@
     position: relative;
     line-height: 1.5;
     display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
     color: var(--link-color);
     padding: 0.25em 0;
     opacity: 0.8;