Skip to content

Fix: Preserve multiple consecutive spaces in Theia UI elements #16935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
ndoschek merged 1 commit into from
Feb 9, 2026
Merged

Fix: Preserve multiple consecutive spaces in Theia UI elements #16935

ndoschek merged 1 commit into from
Feb 9, 2026

Conversation

@awaisahmed119
Copy link
Contributor

@awaisahmed119 awaisahmed119 commented Feb 4, 2026 •
edited
Loading

What it does

Fixes multiple consecutive spaces being collapsed to single space in Theia UI elements (explorer tree, dialogs, breadcrumbs, and editor tab tooltips).

How to test

  1. Create files/folders with multiple consecutive spaces in their names (e.g., "test file.txt", "folder name")
  2. Verify in Explorer tree view that multiple spaces are preserved (not collapsed to single space)
  3. Hover over editor tabs to see tooltips - verify file paths with multiple spaces display correctly
  4. Open dialogs that display file names - verify spaces are preserved
  5. Check breadcrumbs navigation - verify spaces in path segments are preserved

Follow-ups

Breaking changes

  • This PR introduces breaking changes and requires careful review. If yes, the breaking changes section in the changelog has been updated.

Attribution

Review checklist

Reminder for reviewers

@github-project-automation github-project-automation bot moved this to Waiting on reviewers in PR Backlog Feb 4, 2026
This was referenced Feb 4, 2026
Closed
Merged
@ndoschek
Copy link
Member

ndoschek commented Feb 4, 2026

Hi @awaisahmed119, thank you for your contribution to Theia!

Before we can proceed, could you please sign the Eclipse Contributor Agreement (ECA). This is a one-time requirement for contributing to Eclipse Foundation projects. To sign the ECA:

After signing, we can retrigger the ECA check and it should pass automatically and we can run the remaining workflows too.
If you have any questions, feel free to ask! TIA

@awaisahmed119 awaisahmed119 force-pushed the preserve-consecutive-spaces branch 2 times, most recently from 9ccf5d6 to bbccbc1 Compare February 4, 2026 11:29
@awaisahmed119
Copy link
Contributor Author

awaisahmed119 commented Feb 4, 2026

Hi @awaisahmed119, thank you for your contribution to Theia!

Before we can proceed, could you please sign the Eclipse Contributor Agreement (ECA). This is a one-time requirement for contributing to Eclipse Foundation projects. To sign the ECA:

After signing, we can retrigger the ECA check and it should pass automatically and we can run the remaining workflows too. If you have any questions, feel free to ask! TIA

Done

@umairsair
Copy link

umairsair commented Feb 4, 2026

should we be setting white-space-collapse instead? white-space changes other behaviors as well other than collapsing spaces, right?

@awaisahmed119
Copy link
Contributor Author

awaisahmed119 commented Feb 4, 2026 •
edited
Loading

should we be setting white-space-collapse instead? white-space changes other behaviors as well other than collapsing spaces, right?

The white-space-collapse property is newer (CSS Text Level 4) and has limited browser support, making it unsuitable for production use. While white-space does control multiple behaviors (space collapsing, wrapping, and line breaks), you actually need that combined control for this use case. Using white-space: pre gives you both space preservation and no-wrap behavior for tree nodes, while white-space: pre-wrap provides space preservation with wrapping for tooltips. If you used white-space-collapse, you'd need multiple separate properties to achieve the same result with worse browser compatibility. The white-space property seems the correct, widely-supported solution here.

@ndoschek ndoschek self-requested a review February 6, 2026 09:05
ndoschek
ndoschek reviewed Feb 6, 2026
View reviewed changes
Copy link
Member

@ndoschek ndoschek left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great overall! Nice comprehensive fix for the whitespace issue across multiple UI components.

One small thing, there seems to be a linting issue in tab-bars.ts, could you have a quick look there? TIA!

@awaisahmed119
Copy link
Contributor Author

awaisahmed119 commented Feb 6, 2026

Looks great overall! Nice comprehensive fix for the whitespace issue across multiple UI components.

One small thing, there seems to be a linting issue in tab-bars.ts, could you have a quick look there? TIA!

Fixed. Please have a look.

@awaisahmed119 awaisahmed119 force-pushed the preserve-consecutive-spaces branch from d021cbf to 0f5b460 Compare February 6, 2026 10:57
@awaisahmed119
Fix: Preserve multiple consecutive spaces in Theia UI elements
c55f16f 
Fixes: eclipse-theia#16865

PROBLEM:
- Multiple consecutive spaces in file/folder names were collapsed to single space
- HTML whitespace normalization and textContent API both collapse spaces

CSS CHANGES:
- tree.css: Applied white-space: pre to .theia-TreeNodeSegment and .theia-TreeNodeSegmentGrow
- dialog.css: Applied white-space: pre-wrap to dialog content (li, div)
- tabs.css: Applied white-space: pre-wrap to tab hover title and caption
- tooltip.css: Applied white-space: pre-wrap to .theia-tooltip
- breadcrumbs.css: Applied white-space: pre-wrap to breadcrumb labels
- tree-decorators.css: Applied white-space: pre to decorator badges

JAVASCRIPT CHANGE:
- tab-bars.ts (handleMouseEnterEvent): Replace consecutive spaces with non-breaking spaces (\u00A0) before passing to hover service

RATIONALE:
- CSS white-space: pre/pre-wrap handles directly rendered HTML elements
- JavaScript solution needed for tooltips because hover-service.ts uses textContent which normalizes whitespace BEFORE CSS is applied
- Non-breaking spaces (\u00A0) are not collapsed by textContent API
- Used 'pre' for short content (tree nodes, badges) to prevent wrapping
- Used 'pre-wrap' for long content (tooltips, dialogs, paths) to allow wrapping

Fix: Fixed linting issues.
@awaisahmed119 awaisahmed119 force-pushed the preserve-consecutive-spaces branch from 0f5b460 to c55f16f Compare February 6, 2026 14:21
ndoschek
ndoschek approved these changes Feb 9, 2026
View reviewed changes
Copy link
Member

@ndoschek ndoschek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot for the updates!
This works great, thanks again for this improvement! 🎉

@github-project-automation github-project-automation bot moved this from Waiting on reviewers to Needs merge in PR Backlog Feb 9, 2026
@ndoschek ndoschek merged commit a286045 into eclipse-theia:master Feb 9, 2026
16 of 17 checks passed
@github-project-automation github-project-automation bot moved this from Needs merge to Done in PR Backlog Feb 9, 2026
@github-actions github-actions bot added this to the 1.69.0 milestone Feb 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ndoschek ndoschek ndoschek approved these changes

Assignees

No one assigned

Labels

None yet

Projects

PR Backlog
Archived in project

Milestone

1.69.0

Development

Successfully merging this pull request may close these issues.

3 participants

@awaisahmed119 @ndoschek @umairsair