Fixes #31312: Leave a 2px gap at the end of wrapped lines for the cursor

src/vs/editor/common/config/editorOptions.ts

@@ -2090,18 +2090,19 @@ export class EditorLayoutProvider {
 			}
 
 			// Given:
-			// viewportColumn = (contentWidth - verticalScrollbarWidth) / typicalHalfwidthCharacterWidth
+			// (leaving 2px for the cursor to have space after the last character)
+			// viewportColumn = (contentWidth - verticalScrollbarWidth - 2) / typicalHalfwidthCharacterWidth
 			// minimapWidth = viewportColumn * minimapCharWidth
 			// contentWidth = remainingWidth - minimapWidth
 			// What are good values for contentWidth and minimapWidth ?
 
-			// minimapWidth = ((contentWidth - verticalScrollbarWidth) / typicalHalfwidthCharacterWidth) * minimapCharWidth
-			// typicalHalfwidthCharacterWidth * minimapWidth = (contentWidth - verticalScrollbarWidth) * minimapCharWidth
-			// typicalHalfwidthCharacterWidth * minimapWidth = (remainingWidth - minimapWidth - verticalScrollbarWidth) * minimapCharWidth
-			// (typicalHalfwidthCharacterWidth + minimapCharWidth) * minimapWidth = (remainingWidth - verticalScrollbarWidth) * minimapCharWidth
-			// minimapWidth = ((remainingWidth - verticalScrollbarWidth) * minimapCharWidth) / (typicalHalfwidthCharacterWidth + minimapCharWidth)
+			// minimapWidth = ((contentWidth - verticalScrollbarWidth - 2) / typicalHalfwidthCharacterWidth) * minimapCharWidth
+			// typicalHalfwidthCharacterWidth * minimapWidth = (contentWidth - verticalScrollbarWidth - 2) * minimapCharWidth
+			// typicalHalfwidthCharacterWidth * minimapWidth = (remainingWidth - minimapWidth - verticalScrollbarWidth - 2) * minimapCharWidth
+			// (typicalHalfwidthCharacterWidth + minimapCharWidth) * minimapWidth = (remainingWidth - verticalScrollbarWidth - 2) * minimapCharWidth
+			// minimapWidth = ((remainingWidth - verticalScrollbarWidth - 2) * minimapCharWidth) / (typicalHalfwidthCharacterWidth + minimapCharWidth)
 
-			minimapWidth = Math.max(0, Math.floor(((remainingWidth - verticalScrollbarWidth) * minimapCharWidth) / (typicalHalfwidthCharacterWidth + minimapCharWidth)));
+			minimapWidth = Math.max(0, Math.floor(((remainingWidth - verticalScrollbarWidth - 2) * minimapCharWidth) / (typicalHalfwidthCharacterWidth + minimapCharWidth)));
 			let minimapColumns = minimapWidth / minimapCharWidth;
 			if (minimapColumns > minimapMaxColumn) {
 				minimapWidth = Math.floor(minimapMaxColumn * minimapCharWidth);
@@ -2119,7 +2120,8 @@ export class EditorLayoutProvider {
 			}
 		}
 
-		const viewportColumn = Math.max(1, Math.floor((contentWidth - verticalScrollbarWidth) / typicalHalfwidthCharacterWidth));
+		// (leaving 2px for the cursor to have space after the last character)
+		const viewportColumn = Math.max(1, Math.floor((contentWidth - verticalScrollbarWidth - 2) / typicalHalfwidthCharacterWidth));
 
 		const verticalArrowSize = (verticalScrollbarHasArrows ? scrollbarArrowSize : 0);
 

src/vs/editor/test/common/viewLayout/editorLayoutProvider.test.ts

@@ -58,7 +58,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 99,
+				viewportColumn: 98,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -174,7 +174,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 89,
+				viewportColumn: 88,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -232,7 +232,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 89,
+				viewportColumn: 88,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -290,7 +290,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 89,
+				viewportColumn: 88,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -348,7 +348,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 84,
+				viewportColumn: 83,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -406,7 +406,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 84,
+				viewportColumn: 83,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -464,7 +464,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 83,
+				viewportColumn: 82,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -522,7 +522,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 172,
+				viewportColumn: 171,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -580,7 +580,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				renderMinimap: RenderMinimap.None,
 				minimapLeft: 0,
 				minimapWidth: 0,
-				viewportColumn: 170,
+				viewportColumn: 169,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -632,13 +632,13 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				decorationsHeight: 800,
 
 				contentLeft: 10,
-				contentWidth: 900,
+				contentWidth: 901,
 				contentHeight: 800,
 
 				renderMinimap: RenderMinimap.Small,
-				minimapLeft: 910,
-				minimapWidth: 90,
-				viewportColumn: 90,
+				minimapLeft: 911,
+				minimapWidth: 89,
+				viewportColumn: 89,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -690,13 +690,13 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				decorationsHeight: 800,
 
 				contentLeft: 10,
-				contentWidth: 900,
+				contentWidth: 901,
 				contentHeight: 800,
 
 				renderMinimap: RenderMinimap.Large,
-				minimapLeft: 910,
-				minimapWidth: 90,
-				viewportColumn: 90,
+				minimapLeft: 911,
+				minimapWidth: 89,
+				viewportColumn: 89,
 
 				verticalScrollbarWidth: 0,
 				horizontalScrollbarHeight: 0,
@@ -825,4 +825,63 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 				}
 			});
 	});
+
+	test('issue #31312: When wrapping, leave 2px for the cursor', () => {
+		doTest({
+			outerWidth: 1201,
+			outerHeight: 422,
+			showGlyphMargin: true,
+			lineHeight: 30,
+			showLineNumbers: true,
+			lineNumbersMinChars: 3,
+			lineNumbersDigitCount: 1,
+			lineDecorationsWidth: 26,
+			typicalHalfwidthCharacterWidth: 12.04296875,
+			maxDigitWidth: 12.04296875,
+			verticalScrollbarWidth: 14,
+			horizontalScrollbarHeight: 10,
+			scrollbarArrowSize: 11,
+			verticalScrollbarHasArrows: false,
+			minimap: true,
+			minimapSide: 'right',
+			minimapRenderCharacters: true,
+			minimapMaxColumn: 120,
+			pixelRatio: 2
+		}, {
+				width: 1201,
+				height: 422,
+
+				glyphMarginLeft: 0,
+				glyphMarginWidth: 30,
+				glyphMarginHeight: 422,
+
+				lineNumbersLeft: 30,
+				lineNumbersWidth: 36,
+				lineNumbersHeight: 422,
+
+				decorationsLeft: 66,
+				decorationsWidth: 26,
+				decorationsHeight: 422,
+
+				contentLeft: 92,
+				contentWidth: 1026,
+				contentHeight: 422,
+
+				renderMinimap: RenderMinimap.Large,
+				minimapLeft: 1104,
+				minimapWidth: 83,
+				viewportColumn: 83,
+
+				verticalScrollbarWidth: 14,
+				horizontalScrollbarHeight: 10,
+
+				overviewRuler: {
+					top: 0,
+					width: 14,
+					height: 422,
+					right: 0
+				}
+			});
+
+	});
 });