fix: 为标题和下拉选项添加文本溢出处理

为 TopBar 标题添加 title 属性，在悬停时显示完整标题，并添加 CSS 防止文本溢出。
将 MainContent 中 Trace 选择器的选项标签进行截断，当任务名过长时显示省略号以改善布局。

frontend/react-template/src/components/MainContent/MainContent.tsx

@@ -99,7 +99,7 @@ export const MainContent: FC<MainContentProps> = ({
             style={{ width: 200 }}
             placeholder="选择 Trace"
             optionList={traceList.map((t) => ({
-              label: t.task || t.trace_id,
+              label: t.task?.length > 15 ? `${t.task.slice(0, 15)}...` : t.task || t.trace_id,
               value: t.trace_id,
             }))}
           />

frontend/react-template/src/components/TopBar/TopBar.module.css

@@ -7,12 +7,21 @@
   justify-content: space-between;
   padding: 0 var(--spacing-lg, 24px);
 }
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
 
 .title h1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: var(--font-size-lg, 16px);
   font-weight: 600;
   color: var(--text-primary, #333333);
-  margin: 0;
+  margin: 0 20px 0 0;
 }
 
 .filters {

frontend/react-template/src/components/TopBar/TopBar.tsx

@@ -222,8 +222,12 @@ export const TopBar: FC<TopBarProps> = ({
 
   return (
     <header className={styles.topbar}>
-      <div className={styles.title}>
+      <div
+        className={styles.title}
+        title={title}
+      >
         <h1>{title}</h1>
+        {/* <h1>{title.length > 50 ? `${title.slice(0, 50)}...` : title}</h1> */}
       </div>
       <div className={styles.filters}>
         <button