From e1fa2a714182a1cbe6ab514c53ae7e447afa0b0b Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 18:22:41 +0000
Subject: [PATCH] fix: prevent text overflow in environment cards

- Add overflow-hidden to Card to contain all content within boundaries
- Add line-clamp-2 to description paragraph to limit to 2 lines
- Add min-w-0 to environment name span and resource selector code
  element so truncate works correctly inside flex containers

Co-authored-by: Aditya Choudhari <adityachoudhari26@users.noreply.github.com>
---
 .../ws/environments/_components/EnvironmentCard.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/routes/ws/environments/_components/EnvironmentCard.tsx b/apps/web/app/routes/ws/environments/_components/EnvironmentCard.tsx
index b6b53f827b..36798c48f0 100644
--- a/apps/web/app/routes/ws/environments/_components/EnvironmentCard.tsx
+++ b/apps/web/app/routes/ws/environments/_components/EnvironmentCard.tsx
@@ -79,10 +79,10 @@ export const EnvironmentCard: React.FC<EnvironmentCardProps> = ({
   return (
     <>
       <Link to={environmentUrl} className="block">
-        <Card className="h-56 transition-all hover:border-primary/50 hover:shadow-md">
+        <Card className="h-56 overflow-hidden transition-all hover:border-primary/50 hover:shadow-md">
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
-              <span className="truncate">{environment.name}</span>
+              <span className="min-w-0 truncate">{environment.name}</span>
               <DropdownMenu>
                 <DropdownMenuTrigger
                   asChild
@@ -120,7 +120,7 @@ export const EnvironmentCard: React.FC<EnvironmentCardProps> = ({
             </CardDescription>
 
             {environment.description && (
-              <p className="mt-2 text-xs text-muted-foreground">
+              <p className="mt-2 line-clamp-2 text-xs text-muted-foreground">
                 {environment.description}
               </p>
             )}
@@ -128,7 +128,7 @@ export const EnvironmentCard: React.FC<EnvironmentCardProps> = ({
           <CardContent className="space-y-3">
             <div className="flex items-start gap-2">
               <Layers className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-              <code className="block truncate rounded bg-muted px-2 py-1 text-xs">
+              <code className="block min-w-0 truncate rounded bg-muted px-2 py-1 text-xs">
                 {environment.resourceSelector}
               </code>
             </div>