Merge pull request microsoft#187580 from microsoft/aiday/colorPickerPresentationOverlap

Placing the color representation to the right of the codicon in the color picker

Author: aiday-mar

src/vs/editor/contrib/colorPicker/browser/colorPicker.css

@@ -48,13 +48,19 @@
 	cursor: pointer;
 	color: white;
 	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.colorpicker-header .picked-color .picked-color-presentation {
+	white-space: nowrap;
+	margin-left: 5px;
+	margin-right: 5px;
 }
 
 .colorpicker-header .picked-color .codicon {
 	color: inherit;
 	font-size: 14px;
-	position: absolute;
-	left: 8px;
 }
 
 .colorpicker-header .picked-color.light {

src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts

@@ -26,6 +26,7 @@ export class ColorPickerHeader extends Disposable {
 
 	private readonly _domNode: HTMLElement;
 	private readonly _pickedColorNode: HTMLElement;
+	private readonly _pickedColorPresentation: HTMLElement;
 	private readonly _originalColorNode: HTMLElement;
 	private readonly _closeButton: CloseButton | null = null;
 	private backgroundColor: Color;
@@ -37,6 +38,9 @@ export class ColorPickerHeader extends Disposable {
 		dom.append(container, this._domNode);
 
 		this._pickedColorNode = dom.append(this._domNode, $('.picked-color'));
+		dom.append(this._pickedColorNode, $('span.codicon.codicon-color-mode'));
+		this._pickedColorPresentation = dom.append(this._pickedColorNode, document.createElement('span'));
+		this._pickedColorPresentation.classList.add('picked-color-presentation');
 
 		const tooltip = localize('clickToToggleColorOptions', "Click to toggle color options (rgb/hsl/hex)");
 		this._pickedColorNode.setAttribute('title', tooltip);
@@ -91,8 +95,7 @@ export class ColorPickerHeader extends Disposable {
 	}
 
 	private onDidChangePresentation(): void {
-		this._pickedColorNode.textContent = this.model.presentation ? this.model.presentation.label : '';
-		this._pickedColorNode.prepend($('.codicon.codicon-color-mode'));
+		this._pickedColorPresentation.textContent = this.model.presentation ? this.model.presentation.label : '';
 	}
 }