fix: handle text overflow for long legend item labels (#92)

Author: jsilll

pages/03-core/core-line-chart.page.tsx

@@ -60,17 +60,17 @@ const dataC = baseline.map(({ x, y }) => ({ x, y: y === null ? null : y + random
 
 const series: Highcharts.SeriesOptionsType[] = [
   {
-    name: "A",
+    name: "Very Long Series Name for Network Traffic Analysis Data Points",
     type: "line",
     data: dataA,
   },
   {
-    name: "B",
+    name: "Extremely Detailed Performance Metrics for Cloud Infrastructure",
     type: "line",
     data: dataB,
   },
   {
-    name: "C",
+    name: "Comprehensive System Resource Utilization Measurements Over Time",
     type: "line",
     data: dataC,
   },

src/internal/components/chart-legend/index.tsx

@@ -421,7 +421,7 @@ const LegendItemTrigger = forwardRef(
         onKeyDown={onKeyDown}
       >
         {marker}
-        <span>{label}</span>
+        <span className={styles["item-label"]}>{label}</span>
       </button>
     );
   },

src/internal/components/chart-legend/styles.scss

@@ -73,6 +73,7 @@
   background-color: transparent;
   cursor: pointer;
   opacity: 1;
+  max-inline-size: 100%;
 
   &:focus {
     outline: none;
@@ -94,6 +95,14 @@
   }
 }
 
+.item-label {
+  overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
 .actions {
   display: flex;
   align-items: center;