Fix: Preserve multiple consecutive spaces in Theia UI elements

Fixes: #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.

Author: awaisahmed119

packages/core/src/browser/shell/tab-bars.ts

@@ -644,8 +644,10 @@ export class TabBarRenderer extends TabBar.Renderer {
         } else if (title.caption) {
             const position = this.tabBar.orientation === 'horizontal' ? 'bottom' : 'right';
             const tooltip = ArrayUtils.coalesce([title.caption, ...this.getDecorationData(title, 'tooltip')]).join(' - ');
+            // Preserve multiple consecutive spaces by replacing with non-breaking spaces
+            const preservedTooltip = tooltip.replace(/ {2,}/g, match => '\u00A0'.repeat(match.length));
             this.hoverService.requestHover({
-                content: tooltip,
+                content: preservedTooltip,
                 target: event.currentTarget,
                 position
             });

packages/core/src/browser/style/breadcrumbs.css

@@ -44,7 +44,7 @@
   display: flex;
   align-items: center;
   flex: 0 1 auto;
-  white-space: nowrap;
+  white-space: pre;
   align-self: center;
   height: 100%;
   color: var(--theia-breadcrumb-foreground);
@@ -118,7 +118,7 @@
   display: flex;
   align-items: center;
   flex: 0 1 auto;
-  white-space: nowrap;
+  white-space: pre;
   cursor: pointer;
   outline: none;
   padding: 0.25rem 0.25rem 0.25rem 0.25rem;

packages/core/src/browser/style/dialog.css

@@ -70,6 +70,12 @@
   overflow-y: auto;
 }
 
+/* Preserve multiple consecutive spaces in dialog content */
+.lm-Widget.dialogOverlay .dialogContent li,
+.lm-Widget.dialogOverlay .dialogContent div {
+  white-space: pre-wrap;
+}
+
 .lm-Widget.dialogOverlay .dialogControl {
   padding: calc(var(--theia-ui-padding) * 2);
   display: flex;
@@ -118,7 +124,7 @@
 .theia-dialog-node-segment {
   flex-grow: 0;
   user-select: none;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .theia-dialog-icon {

packages/core/src/browser/style/tabs.css

@@ -115,7 +115,7 @@
   color: var(--theia-descriptionForeground);
   flex: 1 1 auto;
   overflow: hidden;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .lm-TabBar-tail {
@@ -536,6 +536,7 @@
   font-weight: bolder;
   max-width: var(--theia-hover-preview-width);
   word-wrap: break-word;
+  white-space: pre-wrap !important;
   font-size: medium;
   margin: 0px 0px;
 }
@@ -544,6 +545,7 @@
   font-size: small;
   max-width: var(--theia-hover-preview-width);
   word-wrap: break-word;
+  white-space: pre-wrap !important;
   margin: 0px 0px;
   margin-top: 4px;
 }

packages/core/src/browser/style/tooltip.css

@@ -19,6 +19,7 @@
   background: var(--theia-editorHoverWidget-background) !important;
   border: 1px solid !important;
   border-color: var(--theia-editorHoverWidget-border) !important;
+  white-space: pre-wrap !important;
 }
 
 /* Hide tooltip arrow */

packages/core/src/browser/style/tree-decorators.css

@@ -15,12 +15,12 @@
  ********************************************************************************/
 
 .theia-caption-prefix {
-  white-space: nowrap;
+  white-space: pre;
   padding-right: 2px;
 }
 
 .theia-caption-suffix {
-  white-space: nowrap;
+  white-space: pre;
   padding: 0px 2px 0px 2px;
 }
 

packages/core/src/browser/style/tree.css

@@ -148,7 +148,7 @@
   align-items: center;
   flex-grow: 0;
   user-select: none;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .theia-TreeNodeSegment.flex {
@@ -159,7 +159,7 @@
   flex-grow: 1 !important;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .theia-TreeNodeTail {