diff --git a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts
index 64b44ac01f..2d5127c302 100644
--- a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts
+++ b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts
@@ -90,6 +90,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 	private _onFocus = this._register(new Emitter<void>());
 	public onFocus: Event<void> = this._onFocus.event;
 	private readonly _widthControlElement: HTMLElement;
+	private readonly _widthControlElementContainer: HTMLElement;
 
 	constructor(
 		container: HTMLElement,
@@ -99,9 +100,12 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
 		super();
 		this._options = opt || Object.create(null);
 		mixin(this._options, defaults, false);
-		this._widthControlElement = DOM.append(container, document.createElement('span'));
-		this._widthControlElement.classList.add('monaco-dropdown-width-control-element');
-		this._widthControlElement.setAttribute('aria-hidden', 'true');
+		// Set up the width measure control using the same classes and structure as the context menu to get the accurate width measurement.
+		this._widthControlElementContainer = DOM.append(container, document.createElement('div'));
+		this._widthControlElementContainer.classList.add('monaco-dropdown-width-control-element', 'context-view', 'fixed');
+		this._widthControlElementContainer.setAttribute('aria-hidden', 'true');
+		this._widthControlElement = DOM.append(this._widthControlElementContainer, document.createElement('span'));
+		this._widthControlElement.classList.add('editable-drop-option-text');
 
 		this._el = DOM.append(container, DOM.$('.monaco-dropdown'));
 		this._el.style.width = '100%';
diff --git a/src/sql/base/browser/ui/editableDropdown/browser/media/dropdownList.css b/src/sql/base/browser/ui/editableDropdown/browser/media/dropdownList.css
index 68606db9ff..2ba759c003 100644
--- a/src/sql/base/browser/ui/editableDropdown/browser/media/dropdownList.css
+++ b/src/sql/base/browser/ui/editableDropdown/browser/media/dropdownList.css
@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-dropdown-width-control-element {
-	position: absolute;
-	left: -10000px;
+	position: absolute !important;
+	left: -10000px !important;
 	visibility: hidden;
 }
 
@@ -14,7 +14,6 @@
 	padding-right: 4px;
 	text-overflow: ellipsis;
 	display: inline-block;
-	width: 100%;
 	overflow: hidden;
 }