debug: fix underflow/overflow in breakpoint edit widget (#236428)

Fixes #233819

src/vs/editor/contrib/hover/browser/glyphHoverWidget.ts

@@ -180,6 +180,7 @@ export class GlyphHoverWidget extends Disposable implements IOverlayWidget, IHov
 		const left = editorLayout.glyphMarginLeft + editorLayout.glyphMarginWidth + (laneOrLine === 'lineNo' ? editorLayout.lineNumbersWidth : 0);
 		this._hover.containerDomNode.style.left = `${left}px`;
 		this._hover.containerDomNode.style.top = `${Math.max(Math.round(top), 0)}px`;
+		this._hover.containerDomNode.style.zIndex = '11'; // 1 more than the zone widget at 10 (#233819)
 	}
 
 	private _onMouseLeave(e: MouseEvent): void {

src/vs/workbench/contrib/debug/browser/media/breakpointWidget.css

@@ -6,6 +6,7 @@
 .monaco-editor .zone-widget .zone-widget-container.breakpoint-widget {
 	display: flex;
 	border-color: #007ACC;
+	background: var(--vscode-editor-background);
 
 	.breakpoint-select-container {
 		display: flex;