adding changes from review

Author: aiday-mar

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

@@ -48,19 +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: 30px;
+	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

@@ -38,9 +38,9 @@ export class ColorPickerHeader extends Disposable {
 		dom.append(container, this._domNode);
 
 		this._pickedColorNode = dom.append(this._domNode, $('.picked-color'));
-		this._pickedColorPresentation = dom.append(this._pickedColorNode, document.createElement('div'));
+		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');
-		dom.append(this._pickedColorNode, $('.codicon.codicon-color-mode'));
 
 		const tooltip = localize('clickToToggleColorOptions', "Click to toggle color options (rgb/hsl/hex)");
 		this._pickedColorNode.setAttribute('title', tooltip);