From 1497dbda29f5fcde2e4d714626bfdb8ea251859f Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 10 Oct 2024 10:32:28 -0700
Subject: [PATCH] handle long resource names in UI

---
 client/src/components/ResourcesTab.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 9792ca9..5fa08ca 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -34,11 +34,13 @@ const ResourcesTab = ({
         readResource(resource.uri);
       }}
       renderItem={(resource) => (
-        <>
-          <FileText className="w-4 h-4 mr-2 text-gray-500" />
-          <span className="flex-1">{resource.uri}</span>
-          <ChevronRight className="w-4 h-4 text-gray-400" />
-        </>
+        <div className="flex items-center w-full">
+          <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+          <span className="flex-1 truncate" title={resource.uri}>
+            {resource.uri}
+          </span>
+          <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+        </div>
       )}
       title="Resources"
       buttonText="List Resources"
@@ -46,7 +48,7 @@ const ResourcesTab = ({
 
     <div className="bg-white rounded-lg shadow">
       <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-        <h3 className="font-semibold">
+        <h3 className="font-semibold truncate" title={selectedResource?.uri}>
           {selectedResource ? selectedResource.uri : "Select a resource"}
         </h3>
         {selectedResource && (