Fix collapse panel overflow in the sidebar

src/components/EditorSidePanel/NotesOverview.jsx

@@ -78,7 +78,11 @@ export default function NotesOverview() {
         >
           {notes.map((n, i) => (
             <Collapse.Panel
-              header={<div>{n.title}</div>}
+              header={
+                <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                  {n.title}
+                </div>
+              }
               itemKey={`${n.id}`}
               id={`scroll_note_${n.id}`}
               key={n.id}

src/components/EditorSidePanel/RelationshipsOverview.jsx

@@ -15,7 +15,12 @@ import {
   IconMore,
   IconSearch,
 } from "@douyinfe/semi-icons";
-import { Cardinality, Constraint, Action, ObjectType } from "../../data/constants";
+import {
+  Cardinality,
+  Constraint,
+  Action,
+  ObjectType,
+} from "../../data/constants";
 import useTables from "../../hooks/useTables";
 import useUndoRedo from "../../hooks/useUndoRedo";
 import Empty from "./Empty";
@@ -90,7 +95,14 @@ function RelationshipPanel({ data }) {
 
   return (
     <div id={`scroll_ref_${data.id}`}>
-      <Collapse.Panel header={data.name} itemKey={`${data.id}`}>
+      <Collapse.Panel
+        header={
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {data.name}
+          </div>
+        }
+        itemKey={`${data.id}`}
+      >
         <div className="flex justify-between items-center mb-3">
           <div className="me-3">
             <span className="font-semibold">Primary: </span>

src/components/EditorSidePanel/TablesOverview.jsx

@@ -174,7 +174,14 @@ function TablePanel({ data }) {
 
   return (
     <div id={`scroll_table_${data.id}`}>
-      <Collapse.Panel header={<div>{data.name}</div>} itemKey={`${data.id}`}>
+      <Collapse.Panel
+        header={
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {data.name}
+          </div>
+        }
+        itemKey={`${data.id}`}
+      >
         <div className="flex items-center mb-2.5">
           <div className="text-md font-semibold">Name: </div>
           <Input

src/components/EditorSidePanel/TypesOverview.jsx

@@ -119,7 +119,14 @@ function TypePanel({ index, data }) {
 
   return (
     <div id={`scroll_type_${index}`}>
-      <Collapse.Panel header={<div>{data.name}</div>} itemKey={`${index}`}>
+      <Collapse.Panel
+        header={
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {data.name}
+          </div>
+        }
+        itemKey={`${index}`}
+      >
         <div className="flex items-center mb-2.5">
           <div className="text-md font-semibold">Name: </div>
           <Input