Text Clipping When Sidebar Collapsed to Icons

[enqoders]

Current Behavior

Title: Visual Bug: Sidebar Text Clipping When Collapsed to Icons

Description:
In @flowfuse/node-red-dashboard@1.26.0, collapsing the sidebar to icons causes text labels to be partially obscured (see attached image). Letters like the "O" in "FLO" are visibly truncated, reducing readability and creating a poor user experience. This indicates a CSS overflow or sizing issue in the collapsed state.

Steps to Reproduce:

1. Deploy a flow with Dashboard 2.0 node (v1.26.0).
2. Access the UI and toggle sidebar collapse to icons.
3. Observe clipped text labels adjacent to icons.

Environment:

• Node-RED: v4.0.9
• Dashboard: @flowfuse/node-red-dashboard@1.26.0
• Browser/OS: Chrome (Latest) (reproducible cross-platform)

Impact:
UI flaw degrading usability; requires CSS adjustment (e.g., padding/font size) to ensure full text visibility when collapsed.

Screenshot:

Expected Behavior

Text labels should remain fully visible or hide completely when collapsed—no partial clipping.

Steps To Reproduce

1. Deploy flow with Dashboard 2.0 node (v1.26.0).
2. Access UI → collapse sidebar to icons.
3. Observe clipped text (e.g., "FLO", "DEP").

Environment

• Dashboard version: @flowfuse/node-red-dashboard@1.26.0
• Node-RED version: v4.0.9 (npm)
• Node.js version: v24.4.1
• npm version:
• Platform/OS: macOS (ARM64)
• Browser: Chrome 138.0.7204.169

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[Julian-Sz]

I have the same problem👍

[vargavitya2]

same problem with firefox 140.0.4 and edge 139.0.3405.86