ai-space/workflow-builder
3
0
Fork 0
mirror of https://github.com/Nikhil-Doye/workflow-builder.git synced 2026-07-22 02:01:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add @tailwindcss/line-clamp for improved text truncation in NodeLibrary

Browse Source 
- 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.
This commit is contained in:
Nikhil-Doye
2025-10-22 17:49:23 -04:00
parent 906b62bdfe
commit 9dadf94b1b
4 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/components/NodeLibrary.tsx
+19 -15
View File
@@ -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>
tailwind.config.js
+1 -1
View File
@@ -85,5 +85,5 @@ module.exports = {
},
},
},
plugins: [require("tailwindcss-animate")],
plugins: [require("tailwindcss-animate"), require("@tailwindcss/line-clamp")],
};