fix(webapp): fade overflowing side menu selector labels

The org, project, and environment selector rows each rendered their own plain
span, so long names hard-clipped mid-character (and the environment name ended
in an ellipsis). They now use SideMenuLabel, which masks the right edge only
while the text actually overflows, matching the rest of the menu.

The mask moved into a shared labelOverflowFade module so EnvironmentLabel can
reuse it; that component already measured overflow for its tooltip, so no
second observer was needed.

Author: samejr

.server-changes/side-menu-label-fade.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Long organization, project, and environment names in the side menu now fade out at the right edge instead of being cut off mid-character or ending in an ellipsis.

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

@@ -6,6 +6,7 @@ import {
 } from "~/assets/icons/EnvironmentIcons";
 import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
 import { cn } from "~/utils/cn";
+import { labelOverflowFadeStyle } from "~/components/primitives/labelOverflowFade";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEffect, useRef, useState } from "react";
 
@@ -88,7 +89,10 @@ export function EnvironmentLabel({
   tooltipSideOffset?: number;
   tooltipSide?: "top" | "right" | "bottom" | "left";
   disableTooltip?: boolean;
-  /** When false, the label clips without an ellipsis (side menu fades it in place). Defaults true. */
+  /**
+   * When false, an overflowing label fades out at its right edge instead of ending in an ellipsis,
+   * matching the other side menu labels. Defaults true.
+   */
   truncate?: boolean;
 }) {
   const spanRef = useRef<HTMLSpanElement>(null);
@@ -122,6 +126,7 @@ export function EnvironmentLabel({
         environmentTextClassName(environment),
         className
       )}
+      style={truncate ? undefined : labelOverflowFadeStyle(isTruncated)}
     >
       {text}
     </span>

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -94,7 +94,7 @@ export function EnvironmentSelector({
                 fades in place and scales its width to 0 so it never holds width mid-drag. The
                 selector is also reused outside the side menu (BlankStatePanels, limits) where the var
                 is unset — the 0.2 max-width fallback pins a ~200px cap (0.2 * 1000px) so long names
-                ellipsis-truncate there instead of widening the control, while opacity stays 1.
+                fade out there instead of widening the control, while opacity stays 1.
               */}
               <span
                 className="flex min-w-0 items-center overflow-hidden"
@@ -105,7 +105,7 @@ export function EnvironmentSelector({
               >
                 <EnvironmentLabel
                   environment={environment}
-                  className="text-ellipsis text-[0.90625rem] font-medium tracking-[-0.01em]"
+                  className="text-[0.90625rem] font-medium tracking-[-0.01em]"
                   disableTooltip
                   truncate={false}
                 />

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -1682,9 +1682,9 @@ function OrgSelector({
                 className="flex min-w-0 items-center gap-1.5 overflow-hidden"
                 style={SIDE_MENU_SELECTOR_LABEL_STYLE}
               >
-                <span className="overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
+                <SideMenuLabel className="text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
                   {organization.title}
-                </span>
+                </SideMenuLabel>
               </span>
             </span>
             <span
@@ -1987,9 +1987,9 @@ function ProjectSelector({
                 className="flex min-w-0 items-center overflow-hidden"
                 style={SIDE_MENU_SELECTOR_LABEL_STYLE}
               >
-                <span className="overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
+                <SideMenuLabel className="text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
                   {project.name ?? "Select a project"}
-                </span>
+                </SideMenuLabel>
               </span>
             </span>
             <span
@@ -2041,7 +2041,7 @@ function ProjectSelector({
                 to={v3ProjectPath(organization, p)}
                 title={
                   <div className="flex w-full items-center justify-between text-text-bright">
-                    <span className="grow truncate text-left">{p.name}</span>
+                    <SideMenuLabel className="min-w-0 grow text-left">{p.name}</SideMenuLabel>
                   </div>
                 }
                 isSelected={isSelected}

apps/webapp/app/components/navigation/SideMenuItem.tsx

@@ -12,12 +12,10 @@ import { motion } from "framer-motion";
 import { usePathName } from "~/hooks/usePathName";
 import { cn } from "~/utils/cn";
 import { type RenderIcon, Icon } from "../primitives/Icon";
+import { labelOverflowFadeStyle } from "../primitives/labelOverflowFade";
 import { SimpleTooltip } from "../primitives/Tooltip";
 import { useActiveFavoriteId } from "./favoritePages";
 
-/** Right-edge fade shown instead of a hard clip, only while the label actually overflows. */
-const LABEL_OVERFLOW_MASK = "linear-gradient(to right, black calc(100% - 1.5rem), transparent)";
-
 /**
  * A menu label that fades out at its right edge when (and only when) the text overflows. Text
  * that fits renders exactly as before, with no mask. Overflow is re-measured when the element
@@ -56,12 +54,7 @@ export function SideMenuLabel({
     <span
       ref={ref}
       className={cn("overflow-hidden whitespace-nowrap", className)}
-      style={{
-        ...style,
-        ...(isOverflowing
-          ? { maskImage: LABEL_OVERFLOW_MASK, WebkitMaskImage: LABEL_OVERFLOW_MASK }
-          : undefined),
-      }}
+      style={{ ...style, ...labelOverflowFadeStyle(isOverflowing) }}
     >
       {children}
     </span>

apps/webapp/app/components/primitives/labelOverflowFade.ts

@@ -0,0 +1,14 @@
+/**
+ * Right-edge gradient fade for labels that clip, used instead of a hard cut or an ellipsis. Apply
+ * it only while the text actually overflows — masking a label that fits would fade its last
+ * characters for no reason.
+ */
+export const LABEL_OVERFLOW_MASK =
+  "linear-gradient(to right, black calc(100% - 1.5rem), transparent)";
+
+/** Mask style for a clipping label, or nothing when the text fits. Spread into a `style` prop. */
+export function labelOverflowFadeStyle(isOverflowing: boolean) {
+  return isOverflowing
+    ? { maskImage: LABEL_OVERFLOW_MASK, WebkitMaskImage: LABEL_OVERFLOW_MASK }
+    : undefined;
+}