@@ -40,6 +40,7 @@ import {
 } from "../ui/combobox";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { InlineButton } from "../ui/button";
+import { DraftProjectName } from "./DraftProjectName";
 import { resolveProjectSettings } from "@t3tools/shared/projectSettings";
 
 // Picker value for the "Add project" row; real entries are keyed by logical
@@ -308,9 +309,9 @@ export function DraftHeroHeadline({
             />
           }
         >
-          <span className="min-w-0 truncate">
-            {isScratchDraft ? "No project" : (activeProjectDisplayName ?? "Choose a project")}
-          </span>
+          <DraftProjectName
+            value={isScratchDraft ? "No project" : (activeProjectDisplayName ?? "Choose a project")}
+          />
         </TooltipTrigger>
         {activeProjectDisplayName && !isScratchDraft ? (
           <TooltipPopup side="top">{activeProjectDisplayName}</TooltipPopup>
@@ -335,8 +336,8 @@ export function DraftHeroHeadline({
                   <ProjectFavicon project={entry.group} className="size-4 shrink-0" />
                 ) : null}
                 <Tooltip>
-                  <TooltipTrigger render={<span className="min-w-0 flex-1 truncate text-sm" />}>
-                    {item.label}
+                  <TooltipTrigger render={<span className="min-w-0 flex-1 text-sm" />}>
+                    <DraftProjectName value={item.label} />
                   </TooltipTrigger>
                   <TooltipPopup side="top">{item.label}</TooltipPopup>
                 </Tooltip>
 
@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { truncateProjectName } from "./DraftProjectName.logic";
+
+const measure = (text: string) => Array.from(text).length;
+
+describe("truncateProjectName", () => {
+  it("keeps distinguishing suffixes in one string without adding whitespace", () => {
+    expect(truncateProjectName("ExampleCompany-CustomerPortal-App", 19, measure)).toBe(
+      "ExampleCo…ortal-App",
+    );
+    expect(truncateProjectName("ExampleCompany-CustomerPortal-Env", 19, measure)).toBe(
+      "ExampleCo…ortal-Env",
+    );
+  });
+
+  it("leaves names that fit unchanged", () => {
+    expect(truncateProjectName("ShortRepo", 9, measure)).toBe("ShortRepo");
+  });
+
+  it("fits proportional character widths", () => {
+    const proportional = (text: string) =>
+      Array.from(text).reduce((width, character) => width + (character === "W" ? 3 : 1), 0);
+    expect(truncateProjectName("WWWW-project-App", 12, proportional)).toBe("WW…App");
+  });
+
+  it("keeps combining marks and emoji sequences intact", () => {
+    const value = "e\u0301👩‍💻-customer-portal-App";
+    const result = truncateProjectName(value, 18, measure);
+    expect(result.startsWith("e\u0301👩‍💻")).toBe(true);
+    expect(result.endsWith("App")).toBe(true);
+    expect(measure(result)).toBeLessThanOrEqual(18);
+  });
+
+  it("handles space for only the ellipsis or no text", () => {
+    expect(truncateProjectName("ExampleCompany", 1, measure)).toBe("…");
+    expect(truncateProjectName("ExampleCompany", 0, measure)).toBe("");
+  });
+});
@@ -0,0 +1,27 @@
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+export function truncateProjectName(
+  value: string,
+  availableWidth: number,
+  measure: (text: string) => number,
+): string {
+  if (measure(value) <= availableWidth) return value;
+  if (measure("…") > availableWidth) return "";
+
+  const characters = Array.from(graphemes.segment(value), (part) => part.segment);
+  const candidate = (count: number) => {
+    const head = characters.slice(0, Math.floor(count / 2)).join("");
+    const tailCount = Math.ceil(count / 2);
+    const tail = tailCount > 0 ? characters.slice(-tailCount).join("") : "";
+    return `${head}…${tail}`;
+  };
+
+  let low = 0;
+  let high = characters.length - 1;
+  while (low < high) {
+    const count = Math.ceil((low + high) / 2);
+    if (measure(candidate(count)) <= availableWidth) low = count;
+    else high = count - 1;
+  }
+  return candidate(low);
+}
@@ -0,0 +1,54 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+import { observeResize } from "~/lib/observeResize";
+
+import { truncateProjectName } from "./DraftProjectName.logic";
+
+export function DraftProjectName({ value }: { value: string }) {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [displayName, setDisplayName] = useState(value);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const context = document.createElement("canvas").getContext("2d");
+    if (!container || !context) return;
+
+    const update = () => {
+      const style = getComputedStyle(container);
+      context.font = style.font;
+      context.letterSpacing = style.letterSpacing === "normal" ? "0px" : style.letterSpacing;
+      setDisplayName(
+        truncateProjectName(
+          value,
+          container.getBoundingClientRect().width,
+          (text) => context.measureText(text).width,
+        ),
+      );
+    };
+    update();
+    const stopObserving = observeResize(container, update);
+    document.fonts.addEventListener("loadingdone", update);
+    return () => {
+      stopObserving();
+      document.fonts.removeEventListener("loadingdone", update);
+    };
+  }, [value]);
+
+  return (
+    <span
+      ref={containerRef}
+      className="inline-grid min-w-0 max-w-full overflow-hidden align-baseline whitespace-nowrap"
+    >
+      {/* Keep the full name's intrinsic width so fitting the visible text cannot shrink its budget. */}
+      <span
+        aria-hidden="true"
+        className="invisible col-start-1 row-start-1 min-w-0 overflow-hidden select-none"
+      >
+        {value}
+      </span>
+      <span aria-label={value} className="col-start-1 row-start-1 min-w-0 overflow-hidden">
+        {displayName}
+      </span>
+    </span>
+  );
+}