Improve AsyncSelect layout and text overflow handling

- Add responsive width container
- Improve text truncation with tooltips

lightrag_webui/src/components/graph/GraphLabels.tsx

@@ -175,16 +175,25 @@ const GraphLabels = () => {
       >
         <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
       </Button>
+      <div className="w-full min-w-[280px] max-w-[500px]">
         <AsyncSelect<string>
           key={selectKey} // Force re-render when data changes
           className="min-w-[300px]"
-        triggerClassName="max-h-8"
+          triggerClassName="max-h-8 w-full overflow-hidden"
           searchInputClassName="max-h-8"
           triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
           fetcher={fetchData}
-        renderOption={(item) => <div style={{ whiteSpace: 'pre' }}>{item}</div>}
+          renderOption={(item) => (
+            <div className="truncate" title={item}>
+              {item}
+            </div>
+          )}
           getOptionValue={(item) => item}
-        getDisplayValue={(item) => <div style={{ whiteSpace: 'pre' }}>{item}</div>}
+          getDisplayValue={(item) => (
+            <div className="min-w-0 flex-1 truncate text-left" title={item}>
+              {item}
+            </div>
+          )}
           notFound={<div className="py-6 text-center text-sm">{t('graphPanel.graphLabels.noLabels')}</div>}
           ariaLabel={t('graphPanel.graphLabels.label')}
           placeholder={t('graphPanel.graphLabels.placeholder')}
@@ -219,6 +228,7 @@ const GraphLabels = () => {
           debounceTime={500}
         />
       </div>
+    </div>
   )
 }