From 12af085dd504e80faba53a9f5f5552477e09f8a5 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 29 May 2025 14:23:07 +0100
Subject: [PATCH 1/2] =?UTF-8?q?Truncate=20long=20branch=20names,=20don?=
 =?UTF-8?q?=E2=80=99t=20let=20the=20icon=20shrink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/environments/EnvironmentLabel.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index 3afa861cf3..b3019e2b5c 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -56,7 +56,10 @@ export function EnvironmentCombo({
 }) {
   return (
     <span className={cn("flex items-center gap-1.5 text-sm text-text-bright", className)}>
-      <EnvironmentIcon environment={environment} className={cn("size-4.5", iconClassName)} />
+      <EnvironmentIcon
+        environment={environment}
+        className={cn("size-4.5 shrink-0", iconClassName)}
+      />
       <EnvironmentLabel environment={environment} />
     </span>
   );
@@ -70,7 +73,7 @@ export function EnvironmentLabel({
   className?: string;
 }) {
   return (
-    <span className={cn(environmentTextClassName(environment), className)}>
+    <span className={cn("truncate text-left", environmentTextClassName(environment), className)}>
       {environment.branchName ? environment.branchName : environmentFullTitle(environment)}
     </span>
   );

From c36bdbff759ff1132aae932b5b7059029bc28e04 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 29 May 2025 14:35:14 +0100
Subject: [PATCH 2/2] Truncate and show tooltip for long branch names

---
 .../environments/EnvironmentLabel.tsx         | 58 ++++++++++++++++++-
 .../app/components/primitives/Tooltip.tsx     |  3 +
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index b3019e2b5c..35c5c05a33 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -6,6 +6,8 @@ import {
 } from "~/assets/icons/EnvironmentIcons";
 import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
 import { cn } from "~/utils/cn";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { useEffect, useRef, useState } from "react";
 
 type Environment = Pick<RuntimeEnvironment, "type"> & { branchName?: string | null };
 
@@ -72,11 +74,61 @@ export function EnvironmentLabel({
   environment: Environment;
   className?: string;
 }) {
-  return (
-    <span className={cn("truncate text-left", environmentTextClassName(environment), className)}>
-      {environment.branchName ? environment.branchName : environmentFullTitle(environment)}
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const text = environment.branchName ? environment.branchName : environmentFullTitle(environment);
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      if (spanRef.current) {
+        const isTruncated = spanRef.current.scrollWidth > spanRef.current.clientWidth;
+        console.log(
+          "isTruncated",
+          isTruncated,
+          spanRef.current.scrollWidth,
+          spanRef.current.clientWidth
+        );
+        setIsTruncated(isTruncated);
+      }
+    };
+
+    checkTruncation();
+    // Add resize observer to recheck on window resize
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    if (spanRef.current) {
+      resizeObserver.observe(spanRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [text]);
+
+  const content = (
+    <span
+      ref={spanRef}
+      className={cn("truncate text-left", environmentTextClassName(environment), className)}
+    >
+      {text}
     </span>
   );
+
+  if (isTruncated) {
+    return (
+      <SimpleTooltip
+        asChild
+        button={content}
+        content={
+          <span ref={spanRef} className={cn("text-left", environmentTextClassName(environment))}>
+            {text}
+          </span>
+        }
+        side="right"
+        variant="dark"
+        sideOffset={34}
+      />
+    );
+  }
+
+  return content;
 }
 
 export function environmentTitle(environment: Environment, username?: string) {
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 354c6573e8..f5181cedc0 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -62,6 +62,7 @@ function SimpleTooltip({
   className,
   buttonClassName,
   asChild = false,
+  sideOffset,
 }: {
   button: React.ReactNode;
   content: React.ReactNode;
@@ -72,6 +73,7 @@ function SimpleTooltip({
   className?: string;
   buttonClassName?: string;
   asChild?: boolean;
+  sideOffset?: number;
 }) {
   return (
     <TooltipProvider disableHoverableContent={disableHoverableContent}>
@@ -82,6 +84,7 @@ function SimpleTooltip({
         <TooltipContent
           side={side}
           hidden={hidden}
+          sideOffset={sideOffset}
           className={cn("text-xs", className)}
           variant={variant}
         >