From 9dadf94b1b1818c01e38284d0b6e72e0c0a33bbf Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Wed, 22 Oct 2025 17:49:23 -0400
Subject: [PATCH] Add @tailwindcss/line-clamp for improved text truncation in
 NodeLibrary

- Updated package.json and package-lock.json to include @tailwindcss/line-clamp version 0.4.4.
- Modified tailwind.config.js to register the line-clamp plugin.
- Enhanced NodeLibrary component to utilize line-clamp for better text handling in descriptions, improving UI clarity.
---
 package-lock.json              | 10 ++++++++++
 package.json                   |  1 +
 src/components/NodeLibrary.tsx | 34 +++++++++++++++++++---------------
 tailwind.config.js             |  2 +-
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe6eab6..680f7c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.3",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "@types/node": "^16.18.0",
         "@types/react": "^18.3.26",
         "@types/react-dom": "^18.2.0",
@@ -4565,6 +4566,15 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
+      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
diff --git a/package.json b/package.json
index ef08845..f5bcd46 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/node": "^16.18.0",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.2.0",
diff --git a/src/components/NodeLibrary.tsx b/src/components/NodeLibrary.tsx
index 4219a16..7adcc23 100644
--- a/src/components/NodeLibrary.tsx
+++ b/src/components/NodeLibrary.tsx
@@ -247,7 +247,7 @@ export const NodeLibrary: React.FC = () => {
 
       <aside
         className={`bg-white border-r border-gray-200 flex flex-col shadow-lg transition-all duration-300 ${
-          isCollapsed ? "w-16" : "w-64 lg:w-72"
+          isCollapsed ? "w-16" : "w-80 lg:w-96"
         }`}
         aria-label="Node Library"
       >
@@ -490,23 +490,27 @@ export const NodeLibrary: React.FC = () => {
                             </div>
                           </div>
                           <div className="flex-1 min-w-0">
-                            <div className="flex items-center space-x-2">
-                              <span className="text-sm font-medium truncate">
-                                {config.userFriendlyName}
-                              </span>
-                              <span className="text-xs text-gray-500">
-                                ({config.technicalName})
-                              </span>
-                              <span
-                                className="text-xs px-1.5 py-0.5 bg-white/60 rounded-full"
-                                aria-label={`Category: ${config.category}`}
-                              >
-                                {config.category}
-                              </span>
+                            <div className="flex flex-col space-y-1">
+                              <div className="flex items-center space-x-2">
+                                <span className="text-sm font-medium">
+                                  {config.userFriendlyName}
+                                </span>
+                                <span className="text-xs text-gray-500">
+                                  ({config.technicalName})
+                                </span>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <span
+                                  className="text-xs px-1.5 py-0.5 bg-white/60 rounded-full"
+                                  aria-label={`Category: ${config.category}`}
+                                >
+                                  {config.category}
+                                </span>
+                              </div>
                             </div>
                             <p
                               id={`node-${nodeType}-description`}
-                              className="text-xs text-gray-500 truncate"
+                              className="text-xs text-gray-500 mt-1 line-clamp-2"
                             >
                               {config.description}
                             </p>
diff --git a/tailwind.config.js b/tailwind.config.js
index a98f108..cd4d7b7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -85,5 +85,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/line-clamp")],
 };