Truncate long branch names and show tooltip

Author: samejr

apps/webapp/app/components/environments/EnvironmentLabel.tsx

@@ -51,28 +51,40 @@ export function EnvironmentCombo({
   environment,
   className,
   iconClassName,
+  tooltipSideOffset,
+  tooltipSide,
 }: {
   environment: Environment;
   className?: string;
   iconClassName?: string;
+  tooltipSideOffset?: number;
+  tooltipSide?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <span className={cn("flex items-center gap-1.5 text-sm text-text-bright", className)}>
       <EnvironmentIcon
         environment={environment}
         className={cn("size-4.5 shrink-0", iconClassName)}
       />
-      <EnvironmentLabel environment={environment} />
+      <EnvironmentLabel
+        environment={environment}
+        tooltipSideOffset={tooltipSideOffset}
+        tooltipSide={tooltipSide}
+      />
     </span>
   );
 }
 
 export function EnvironmentLabel({
   environment,
   className,
+  tooltipSideOffset = 34,
+  tooltipSide = "right",
 }: {
   environment: Environment;
   className?: string;
+  tooltipSideOffset?: number;
+  tooltipSide?: "top" | "right" | "bottom" | "left";
 }) {
   const spanRef = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
@@ -115,9 +127,10 @@ export function EnvironmentLabel({
             {text}
           </span>
         }
-        side="right"
+        side={tooltipSide}
         variant="dark"
-        sideOffset={34}
+        sideOffset={tooltipSideOffset}
+        disableHoverableContent
       />
     );
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx

@@ -452,7 +452,12 @@ function Upgradable({
               {environments.map((environment, index) => (
                 <TableRow key={environment.id}>
                   <TableCell>
-                    <EnvironmentCombo environment={environment} />
+                    <EnvironmentCombo
+                      environment={environment}
+                      className="max-w-[18ch]"
+                      tooltipSideOffset={6}
+                      tooltipSide="top"
+                    />
                   </TableCell>
                   <TableCell alignment="right">{environment.planConcurrencyLimit}</TableCell>
                   <TableCell alignment="right">