diff --git a/lightrag_webui/src/components/graph/GraphLabels.tsx b/lightrag_webui/src/components/graph/GraphLabels.tsx
index 7ec2b6f5..ca2d1691 100644
--- a/lightrag_webui/src/components/graph/GraphLabels.tsx
+++ b/lightrag_webui/src/components/graph/GraphLabels.tsx
@@ -175,49 +175,59 @@ const GraphLabels = () => {
       >
         <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
       </Button>
-      <AsyncSelect<string>
-        key={selectKey} // Force re-render when data changes
-        className="min-w-[300px]"
-        triggerClassName="max-h-8"
-        searchInputClassName="max-h-8"
-        triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
-        fetcher={fetchData}
-        renderOption={(item) => <div style={{ whiteSpace: 'pre' }}>{item}</div>}
-        getOptionValue={(item) => item}
-        getDisplayValue={(item) => <div style={{ whiteSpace: 'pre' }}>{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')}
-        searchPlaceholder={t('graphPanel.graphLabels.placeholder')}
-        noResultsMessage={t('graphPanel.graphLabels.noLabels')}
-        value={label !== null ? label : '*'}
-        onChange={(newLabel) => {
-          const currentLabel = useSettingsStore.getState().queryLabel;
+      <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 w-full overflow-hidden"
+          searchInputClassName="max-h-8"
+          triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
+          fetcher={fetchData}
+          renderOption={(item) => (
+            <div className="truncate" title={item}>
+              {item}
+            </div>
+          )}
+          getOptionValue={(item) => item}
+          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')}
+          searchPlaceholder={t('graphPanel.graphLabels.placeholder')}
+          noResultsMessage={t('graphPanel.graphLabels.noLabels')}
+          value={label !== null ? label : '*'}
+          onChange={(newLabel) => {
+            const currentLabel = useSettingsStore.getState().queryLabel;
 
-          // select the last item means query all
-          if (newLabel === '...') {
-            newLabel = '*';
-          }
+            // select the last item means query all
+            if (newLabel === '...') {
+              newLabel = '*';
+            }
 
-          // Handle reselecting the same label
-          if (newLabel === currentLabel && newLabel !== '*') {
-            newLabel = '*';
-          }
+            // Handle reselecting the same label
+            if (newLabel === currentLabel && newLabel !== '*') {
+              newLabel = '*';
+            }
 
-          // Add selected label to search history (except for special cases)
-          if (newLabel && newLabel !== '*' && newLabel !== '...' && newLabel.trim() !== '') {
-            SearchHistoryManager.addToHistory(newLabel);
-          }
+            // Add selected label to search history (except for special cases)
+            if (newLabel && newLabel !== '*' && newLabel !== '...' && newLabel.trim() !== '') {
+              SearchHistoryManager.addToHistory(newLabel);
+            }
 
-          // Reset graphDataFetchAttempted flag to ensure data fetch is triggered
-          useGraphStore.getState().setGraphDataFetchAttempted(false);
+            // Reset graphDataFetchAttempted flag to ensure data fetch is triggered
+            useGraphStore.getState().setGraphDataFetchAttempted(false);
 
-          // Update the label to trigger data loading
-          useSettingsStore.getState().setQueryLabel(newLabel);
-        }}
-        clearable={false}  // Prevent clearing value on reselect
-        debounceTime={500}
-      />
+            // Update the label to trigger data loading
+            useSettingsStore.getState().setQueryLabel(newLabel);
+          }}
+          clearable={false}  // Prevent clearing value on reselect
+          debounceTime={500}
+        />
+      </div>
     </div>
   )
 }