diff --git a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css
index 452d83eeb8b7a..20c8a2ceed071 100644
--- a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css
+++ b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.css
@@ -14,5 +14,11 @@
 */
 .monaco-editor .margin-view-overlays .cldr {
 	position: absolute;
+	width: 100%;
 	height: 100%;
-}
\ No newline at end of file
+}
+
+.monaco-editor .margin-view-overlays .line-decor-container {
+	position: absolute;
+	height: 100%;
+}
diff --git a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts
index 2c1b1e495f055..cc89fa26306aa 100644
--- a/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts
+++ b/src/vs/editor/browser/viewParts/linesDecorations/linesDecorations.ts
@@ -95,7 +95,6 @@ export class LinesDecorationsOverlay extends DedupOverlay {
 
 		const left = this._decorationsLeft.toString();
 		const width = this._decorationsWidth.toString();
-		const common = '" style="left:' + left + 'px;width:' + width + 'px;"></div>';
 
 		const output: string[] = [];
 		for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
@@ -103,14 +102,9 @@ export class LinesDecorationsOverlay extends DedupOverlay {
 			const decorations = toRender[lineIndex].getDecorations();
 			let lineOutput = '';
 			for (const decoration of decorations) {
-				let addition = '<div class="cldr ' + decoration.className;
-				if (decoration.tooltip !== null) {
-					addition += '" title="' + decoration.tooltip; // The tooltip is already escaped.
-				}
-				addition += common;
-				lineOutput += addition;
+				lineOutput += `<div class="cldr ${decoration.className}"${decoration.tooltip !== null ? ` title="${decoration.tooltip}"` : ''}></div>`;
 			}
-			output[lineIndex] = lineOutput;
+			output[lineIndex] = `<div class="line-decor-container" style="left:${left}px;width:${width}px;">${lineOutput}</div>`;
 		}
 
 		this._renderResult = output;
diff --git a/src/vs/editor/contrib/folding/browser/folding.css b/src/vs/editor/contrib/folding/browser/folding.css
index 11ee8010be44d..3273cb405a1fa 100644
--- a/src/vs/editor/contrib/folding/browser/folding.css
+++ b/src/vs/editor/contrib/folding/browser/folding.css
@@ -14,6 +14,7 @@
 	justify-content: center;
 	font-size: 140%;
 	margin-left: 2px;
+	z-index: 1;
 }
 
 .monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
diff --git a/src/vs/editor/contrib/folding/browser/folding.ts b/src/vs/editor/contrib/folding/browser/folding.ts
index 49b243f0733a1..f25d03298cc34 100644
--- a/src/vs/editor/contrib/folding/browser/folding.ts
+++ b/src/vs/editor/contrib/folding/browser/folding.ts
@@ -407,17 +407,9 @@ export class FoldingController extends Disposable implements IEditorContribution
 		let iconClicked = false;
 		switch (e.target.type) {
 			case MouseTargetType.GUTTER_LINE_DECORATIONS: {
-				const data = e.target.detail;
-				const offsetLeftInGutter = e.target.element!.offsetLeft;
-				const gutterOffsetX = data.offsetX - offsetLeftInGutter;
-
-				// const gutterOffsetX = data.offsetX - data.glyphMarginWidth - data.lineNumbersWidth - data.glyphMarginLeft;
-
-				// TODO@joao TODO@alex TODO@martin this is such that we don't collide with dirty diff
-				if (gutterOffsetX < 4) { // the whitespace between the border and the real folding icon border is 4px
+				if (e.target.element?.classList?.contains?.('dirty-diff-glyph')) {
 					return;
 				}
-
 				iconClicked = true;
 				break;
 			}
diff --git a/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css b/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css
index 1cea03b405730..8b0bf4ce2ad3a 100644
--- a/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css
+++ b/src/vs/workbench/contrib/scm/browser/media/dirtydiffDecorator.css
@@ -5,7 +5,6 @@
 
 .monaco-editor .dirty-diff-glyph {
 	margin-left: 5px;
-	z-index: 5;
 }
 
 .monaco-editor .dirty-diff-glyph:before {
@@ -14,6 +13,7 @@
 	height: 100%;
 	width: 0;
 	left: -2px;
+	z-index: 5;
 }
 
 .monaco-workbench.monaco-enable-motion .monaco-editor .dirty-diff-glyph:before {
diff --git a/src/vs/workbench/contrib/scm/browser/quickDiffWidget.ts b/src/vs/workbench/contrib/scm/browser/quickDiffWidget.ts
index 51bf45c1fadb8..0a4db9881818e 100644
--- a/src/vs/workbench/contrib/scm/browser/quickDiffWidget.ts
+++ b/src/vs/workbench/contrib/scm/browser/quickDiffWidget.ts
@@ -519,13 +519,13 @@ export class QuickDiffEditorController extends Disposable implements IEditorCont
 					cursor: pointer;
 				}
 
-				.monaco-editor .margin-view-overlays .dirty-diff-glyph:hover::before {
+				.monaco-editor .margin-view-overlays .line-decor-container:hover .dirty-diff-glyph::before {
 					height: 100%;
 					width: 6px;
 					left: -6px;
 				}
 
-				.monaco-editor .margin-view-overlays .dirty-diff-deleted:hover::after {
+				.monaco-editor .margin-view-overlays .line-decor-container:hover .dirty-diff-deleted::after {
 					bottom: 0;
 					border-top-width: 0;
 					border-bottom-width: 0;
@@ -680,16 +680,7 @@ export class QuickDiffEditorController extends Disposable implements IEditorCont
 		if (!e.target.element) {
 			return;
 		}
-		if (e.target.element.className.indexOf('dirty-diff-glyph') < 0) {
-			return;
-		}
-
-		const data = e.target.detail;
-		const offsetLeftInGutter = e.target.element.offsetLeft;
-		const gutterOffsetX = data.offsetX - offsetLeftInGutter;
-
-		// TODO@joao TODO@alex TODO@martin this is such that we don't collide with folding
-		if (gutterOffsetX < -3 || gutterOffsetX > 3) { // dirty diff decoration on hover is 6px wide
+		if (!e.target.element.classList.contains('dirty-diff-glyph')) {
 			return;
 		}