feat(webapp): fade side menu labels out in place instead of truncating

While the side menu is dragged or animated between open and collapsed, the
button and nav labels used to shrink their text box in lockstep with the fade,
so the text visibly truncated (with an ellipsis) as the row narrowed. Drive the
visible fade purely by opacity so the text stays at full width and simply fades
in place. Labels that are wider than the row still clip at its edge, now without
an ellipsis.

The selector label width cap still scales to zero as the label finishes fading,
so an invisible label never holds layout width (which would push the row's clip
edge into the icon). EnvironmentLabel gains a `truncate` prop (default true) so
only the side menu opts out; every other usage is unchanged.

Author: samejr

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

@@ -81,12 +81,16 @@ export function EnvironmentLabel({
   tooltipSideOffset = 34,
   tooltipSide = "right",
   disableTooltip = false,
+  truncate = true,
 }: {
   environment: Environment;
   className?: string;
   tooltipSideOffset?: number;
   tooltipSide?: "top" | "right" | "bottom" | "left";
   disableTooltip?: boolean;
+  /** When false, the label clips without an ellipsis (used by the resizable side menu so the label
+   * fades out in place while dragging instead of truncating). Defaults to true everywhere else. */
+  truncate?: boolean;
 }) {
   const spanRef = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
@@ -113,7 +117,12 @@ export function EnvironmentLabel({
   const content = (
     <span
       ref={spanRef}
-      className={cn("truncate text-left", environmentTextClassName(environment), className)}
+      className={cn(
+        truncate ? "truncate" : "overflow-hidden whitespace-nowrap",
+        "text-left",
+        environmentTextClassName(environment),
+        className
+      )}
     >
       {text}
     </span>

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

@@ -92,23 +92,27 @@ export function EnvironmentSelector({
             <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
               <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
               {/*
-                Width and opacity are driven by the resizable SideMenu's `--sm-label-opacity`
-                variable so the label tracks a drag frame-by-frame in both directions (gating on
-                isCollapsed, which only flips on release, made the label pop in after a drag-open).
+                Opacity is driven by the resizable SideMenu's `--sm-label-opacity` variable so the
+                label fades frame-by-frame in both directions (gating on isCollapsed, which only flips
+                on release, made the label pop in after a drag-open). The max-width cap is generous
+                (far wider than any env name) so the visible fade is driven purely by opacity — the
+                text stays full and fades out in place instead of truncating as the row narrows —
+                while still reaching 0 as the label finishes fading so it never holds layout width.
                 Unset in the other places this selector is used (blank-state panels, Limits page)
                 → falls back to fully visible.
               */}
               <span
                 className="flex min-w-0 items-center overflow-hidden"
                 style={{
-                  maxWidth: "calc(var(--sm-label-opacity, 1) * 200px)",
+                  maxWidth: "calc(var(--sm-label-opacity, 1) * 1000px)",
                   opacity: "var(--sm-label-opacity, 1)",
                 }}
               >
                 <EnvironmentLabel
                   environment={environment}
                   className="text-[0.90625rem] font-medium tracking-[-0.01em]"
                   disableTooltip
+                  truncate={false}
                 />
               </span>
             </span>

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

@@ -78,7 +78,7 @@ export function HelpAndFeedback({
                   transitions: they would lag the per-frame variable writes.
                 */}
                     <span
-                      className="min-w-0 truncate text-[0.90625rem] font-medium tracking-[-0.01em] text-text-dimmed group-hover:text-text-bright"
+                      className="min-w-0 overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-dimmed group-hover:text-text-bright"
                       style={{
                         maxWidth: "calc(var(--sm-label-opacity, 1) * 150px)",
                         opacity: "var(--sm-label-opacity, 1)",

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

@@ -225,14 +225,17 @@ const SIDE_MENU_CHEVRON_STYLE = {
   maxWidth: "calc(var(--sm-label-opacity, 1) * 16px)",
 } as const;
 /**
- * The selector rows' label container (org/project/environment): width and opacity both follow
- * --sm-label-opacity so the label tracks a drag frame-by-frame in BOTH directions. Gating these on
- * `isCollapsed` (which only flips on release) made the labels pop in after a drag-open instead of
- * fading in like the nav items. The variable also animates during the click-toggle, and is 0/1 at
- * the collapsed/expanded resting states, so no isCollapsed classes or CSS transitions are needed.
+ * The selector rows' label container (org/project/environment): opacity follows --sm-label-opacity
+ * so the label fades frame-by-frame in BOTH directions (gating on `isCollapsed`, which only flips on
+ * release, made labels pop in after a drag-open instead of fading). The max-width cap is deliberately
+ * generous (far wider than any label) so the visible fade is driven purely by opacity — the text
+ * stays full and fades out in place rather than being truncated as the row narrows. Because the cap
+ * still scales with the variable it reaches 0 exactly as the label finishes fading, so an invisible
+ * label never holds layout width (which would push the row's clip edge into the icon). No isCollapsed
+ * classes or CSS transitions are needed: the variable is 0/1 at the collapsed/expanded resting states.
  */
 const SIDE_MENU_SELECTOR_LABEL_STYLE = {
-  maxWidth: "calc(var(--sm-label-opacity, 1) * 200px)",
+  maxWidth: "calc(var(--sm-label-opacity, 1) * 1000px)",
   opacity: "var(--sm-label-opacity, 1)",
 } as const;
 
@@ -1207,7 +1210,7 @@ function OrgSelector({
                 className="flex min-w-0 items-center gap-1.5 overflow-hidden"
                 style={SIDE_MENU_SELECTOR_LABEL_STYLE}
               >
-                <span className="truncate text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
+                <span className="overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
                   {organization.title}
                 </span>
               </span>
@@ -1497,7 +1500,7 @@ function ProjectSelector({
                 className="flex min-w-0 items-center overflow-hidden"
                 style={SIDE_MENU_SELECTOR_LABEL_STYLE}
               >
-                <span className="truncate text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
+                <span className="overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-bright">
                   {project.name ?? "Select a project"}
                 </span>
               </span>

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

@@ -100,7 +100,7 @@ export function SideMenuItem({
         >
           <span
             className={cn(
-              "select-none truncate text-[0.90625rem] font-medium tracking-[-0.01em]",
+              "select-none overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em]",
               nameClassName
             )}
           >