Fixes #28602 (#30182)

* fixes #28602

* fix keybinding widget mess

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css

@@ -3,11 +3,13 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-kb {
-	white-space: nowrap;
+.monaco-keybinding {
+	display: flex;
+	align-items: center;
+	line-height: 10px;
 }
 
-.monaco-kbkey {
+.monaco-keybinding > .monaco-keybinding-key {
 	display: inline-block;
 	border: solid 1px rgba(204, 204, 204, 0.4);
 	border-bottom-color: rgba(187, 187, 187, 0.4);
@@ -16,16 +18,23 @@
 	background-color: rgba(221, 221, 221, 0.4);
 	vertical-align: middle;
 	color: #555;
-	line-height: 10px;
 	font-size: 11px;
 	padding: 3px 5px;
 }
 
-.hc-black .monaco-kbkey,
-.vs-dark .monaco-kbkey {
+.hc-black .monaco-keybinding > .monaco-keybinding-key,
+.vs-dark .monaco-keybinding > .monaco-keybinding-key {
 	background-color: rgba(128, 128, 128, 0.17);
 	color: #ccc;
 	border: solid 1px rgba(51, 51, 51, 0.6);
 	border-bottom-color: rgba(68, 68, 68, 0.6);
 	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
+}
+
+.monaco-keybinding > .monaco-keybinding-key-separator {
+	display: inline-block;
+}
+
+.monaco-keybinding > .monaco-keybinding-key-chord-separator {
+	width: 2px;
 }
\ No newline at end of file

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.ts

@@ -35,7 +35,7 @@ export class KeybindingLabel implements IDisposable {
 	private didEverRender: boolean;
 
 	constructor(container: HTMLElement, private os: OperatingSystem) {
-		this.domNode = dom.append(container, $('.htmlkb'));
+		this.domNode = dom.append(container, $('.monaco-keybinding'));
 		this.didEverRender = false;
 		container.appendChild(this.domNode);
 	}
@@ -63,7 +63,7 @@ export class KeybindingLabel implements IDisposable {
 				this.renderPart(this.domNode, firstPart, this.matches ? this.matches.firstPart : null);
 			}
 			if (chordPart) {
-				dom.append(this.domNode, $('span', null, ' '));
+				dom.append(this.domNode, $('span.monaco-keybinding-key-chord-separator', null, ' '));
 				this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null);
 			}
 			this.domNode.title = this.keybinding.getAriaLabel();
@@ -93,9 +93,9 @@ export class KeybindingLabel implements IDisposable {
 	}
 
 	private renderKey(parent: HTMLElement, label: string, highlight: boolean, separator: string): void {
-		dom.append(parent, $('span.monaco-kbkey' + (highlight ? '.highlight' : ''), null, label));
+		dom.append(parent, $('span.monaco-keybinding-key' + (highlight ? '.highlight' : ''), null, label));
 		if (separator) {
-			dom.append(parent, $('span', null, separator));
+			dom.append(parent, $('span.monaco-keybinding-key-separator', null, separator));
 		}
 	}
 

src/vs/base/parts/quickopen/browser/quickopen.css

@@ -52,6 +52,7 @@
 	text-overflow: ellipsis;
 	display: flex;
 	flex-direction: column;
+	height: 100%;
 }
 
 .quick-open-widget .quick-open-tree .quick-open-entry > .quick-open-row {
@@ -91,7 +92,7 @@
 	margin-right: 8px;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-kbkey {
+.quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key {
 	vertical-align: text-bottom;
 }
 

src/vs/workbench/parts/preferences/browser/media/keybindings.css

@@ -30,7 +30,7 @@
 	justify-content: center;
 }
 
-.defineKeybindingWidget .output .htmlkb {
+.defineKeybindingWidget .output .monaco-keybinding {
 	margin: 0px 4px;
 }