Debug: Call stack view use more ellipsis

fixes #33326

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -200,6 +200,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	padding-right: 0.8em;
+	display: flex;
 }
 
 .debug-viewlet .debug-call-stack .stack-frame.label {
@@ -207,6 +208,12 @@
 	font-style: italic;
 }
 
+.debug-viewlet .debug-call-stack .stack-frame .label {
+	flex: 1;
+	flex-shrink: 0;
+	min-width: fit-content;
+}
+
 .debug-viewlet .debug-call-stack .stack-frame.subtle {
 	font-style: italic;
 }
@@ -216,7 +223,10 @@
 }
 
 .debug-viewlet .debug-call-stack .stack-frame > .file {
-	float: right;
+	display: flex;
+	overflow: hidden;
+	flex-wrap: wrap;
+	justify-content: flex-end;
 }
 
 .debug-viewlet .debug-call-stack .stack-frame > .file > .line-number.unavailable {
@@ -227,6 +237,11 @@
 	color: rgba(108, 108, 108, 0.8);
 }
 
+.debug-viewlet .debug-call-stack .stack-frame > .file > .file-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .vs-dark .debug-viewlet .debug-call-stack > .monaco-tree-row:not(.selected) .stack-frame > .file {
 	color: rgba(204, 204, 204, 0.6);
 }

src/vs/workbench/parts/debug/electron-browser/debugViewer.ts

@@ -502,7 +502,8 @@ export class CallStackRenderer implements IRenderer {
 		data.label = dom.append(data.stackFrame, $('span.label.expression'));
 		data.file = dom.append(data.stackFrame, $('.file'));
 		data.fileName = dom.append(data.file, $('span.file-name'));
-		data.lineNumber = dom.append(data.file, $('span.line-number'));
+		const wrapper = dom.append(data.file, $('span.line-number-wrapper'));
+		data.lineNumber = dom.append(wrapper, $('span.line-number'));
 
 		return data;
 	}