From e73419bef379f7956f024557cbf40bd3755a0645 Mon Sep 17 00:00:00 2001 From: Ulugbek Abdullaev Date: Mon, 26 Feb 2024 14:19:37 +0100 Subject: [PATCH] rename suggestions: fix width overflow for long suggestions (#206212) * rename suggestions: fix width overflow * rename suggestions: increase approximate font width * rename suggestions: use editor#typicalHalfwidthCharacterWidth --- src/vs/editor/contrib/rename/browser/renameInputField.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vs/editor/contrib/rename/browser/renameInputField.ts b/src/vs/editor/contrib/rename/browser/renameInputField.ts index cf76d531a2a77..3bb00ecdb0503 100644 --- a/src/vs/editor/contrib/rename/browser/renameInputField.ts +++ b/src/vs/editor/contrib/rename/browser/renameInputField.ts @@ -435,6 +435,7 @@ class CandidatesView { private _lineHeight: number; private _availableHeight: number; private _minimumWidth: number; + private _typicalHalfwidthCharacterWidth: number; private _disposables: DisposableStore; @@ -446,6 +447,7 @@ class CandidatesView { this._minimumWidth = 0; this._lineHeight = opts.fontInfo.lineHeight; + this._typicalHalfwidthCharacterWidth = opts.fontInfo.typicalHalfwidthCharacterWidth; this._listContainer = document.createElement('div'); this._listContainer.style.fontFamily = opts.fontInfo.fontFamily; @@ -515,7 +517,6 @@ class CandidatesView { public layout({ height, width }: { height: number; width: number }): void { this._availableHeight = height; this._minimumWidth = width; - this._listContainer.style.width = `${this._minimumWidth}px`; } public setCandidates(candidates: NewSymbolName[]): void { @@ -613,8 +614,7 @@ class CandidatesView { } private _pickListWidth(candidates: NewSymbolName[]): number { - const APPROXIMATE_CHAR_WIDTH = 7.2; // approximate # of pixes taken by a single character - const longestCandidateWidth = Math.ceil(Math.max(...candidates.map(c => c.newSymbolName.length)) * APPROXIMATE_CHAR_WIDTH); // TODO@ulugbekna: use editor#typicalCharacterWidth or something + const longestCandidateWidth = Math.ceil(Math.max(...candidates.map(c => c.newSymbolName.length)) * this._typicalHalfwidthCharacterWidth); const width = Math.max( this._minimumWidth, 4 /* padding */ + 16 /* sparkle icon */ + 5 /* margin-left */ + longestCandidateWidth + 10 /* (possibly visible) scrollbar width */ // TODO@ulugbekna: approximate calc - clean this up