The Nx Workspace Project Graph doesn't effectively render app/lib lists of over 20 items

[X-Guardian]

Current Behavior

If an Nx project contains more than 20 apps or 20 libs, the Graph UI renders the app/lib list inefficiently, not making use of available vertical space.

20 Lib Example	21 Lib Example

20 App Example	21 App Example

Looking at the generated HTML, this is due to a hard-coded height: 400px being applied to the virtuoso-scroller div when there are more than 20 items in the list.

Expected Behavior

The app and lib list should dynamically share the available vertical space in the window.

• Lists with ≤20 items: Regular <ul>, takes natural height
• Lists with >20 items: Virtuoso fills all available vertical space
• No wasted space - optimal use of panel height

GitHub Repo

No response

Steps to Reproduce

N/A

Nx Report

Node           : 22.16.0
OS             : darwin-arm64
Native Target  : aarch64-macos
pnpm           : 10.11.1

nx                     : 22.2.0-beta.2
@nx/js                 : 22.2.0-beta.2
@nx/jest               : 22.2.0-beta.2
@nx/eslint             : 22.2.0-beta.2
@nx/workspace          : 0.0.1
@nx/angular            : 22.2.0-beta.2
@nx/cypress            : 22.2.0-beta.2
@nx/detox              : 0.0.1
@nx/devkit             : 22.2.0-beta.2
@nx/dotnet             : 0.0.1
@nx/esbuild            : 22.2.0-beta.2
@nx/eslint-plugin      : 22.2.0-beta.2
@nx/expo               : 0.0.1
@nx/express            : 0.0.1
@nx/gradle             : 22.2.0-beta.2
@nx/maven              : 0.0.1
@nx/module-federation  : 0.0.1
@nx/nest               : 0.0.1
@nx/next               : 22.2.0-beta.2
@nx/node               : 0.0.1
@nx/nuxt               : 0.0.1
@nx/playwright         : 22.2.0-beta.2
@nx/plugin             : 0.0.1
@nx/react              : 22.2.0-beta.2
@nx/react-native       : 0.0.1
@nx/rollup             : 0.0.1
@nx/remix              : 0.0.1
@nx/rspack             : 22.2.0-beta.2
@nx/rsbuild            : 22.2.0-beta.2
@nx/storybook          : 22.2.0-beta.2
@nx/vite               : 22.2.0-beta.2
@nx/vitest             : 22.2.0-beta.2
@nx/vue                : 0.0.1
@nx/web                : 22.2.0-beta.2
@nx/webpack            : 22.2.0-beta.2
@nx/docker             : 0.0.1
create-nx-workspace    : 0.0.1
typescript             : 5.9.2

Failure Logs

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Looking at the code in graph/client/src/app/feature-projects/projects-shell.tsx, the component that would need to be updated to resolve this is in the @nx/graph package, but I can't see the code for this anywhere. Is it not open-sourced?

For reference, I resolved the vertical display issues by making the following changes to the @nx/graph v1.0.1 node_modules package:

1. Line 10261 - NxGraphProjectListControl Wrapper

Add flex classes to enable the component to fill available height.

Current:

return /* @__PURE__ */ M("div", { className: "flex flex-col gap-4", children: [

Change to:

return /* @__PURE__ */ M("div", { className: "flex flex-col gap-4 flex-1 min-h-0", children: [

---

2. Line 10363 - Section Wrapper (Applications/E2E/Libraries)

Conditionally apply flex classes only to sections using Virtuoso (>20 items).

Current:

return t.length === 0 ? null : /* @__PURE__ */ M("div", { className: "flex flex-col gap-2", children: [

Change to:

return t.length === 0 ? null : /* @__PURE__ */ M("div", { className: u.length > 20 ? "flex flex-col gap-2 flex-1 min-h-0" : "flex flex-col gap-2", children: [

Rationale: Sections with ≤20 items use a regular <ul> and should take only their natural height. Sections with >20 items use Virtuoso and need flex-1 min-h-0 to fill available space.

---

3. Line 10389 - Virtuoso Height Style

Remove hardcoded 400px height and use percentage-based height.

Current:

style: { height: 400, scrollbarWidth: "thin" },

Change to:

style: { height: "100%", scrollbarWidth: "thin" },

Rationale: Using height: "100%" allows Virtuoso to fill its container's height dynamically.

---

4. Line 10666 - NxGraphPanelItemGroup Component

Add flex classes to enable proper height propagation through the component tree.

Current:

className: I("flex flex-col gap-2", e ? "" : "pb-4", n),

Change to:

className: I("flex flex-col gap-2 flex-1 min-h-0", e ? "" : "pb-4", n),