improvements

Author: Himanshu-Singh-Chauhan

src/vs/workbench/browser/parts/editor/editorGroupWatermark.ts

@@ -202,6 +202,13 @@ export class EditorGroupWatermark extends Disposable {
 		const openFolderButton = append(container, $('button.open-folder-button'));
 		openFolderButton.textContent = localize('watermark.openFolder', "Open Folder");
 
+		// Add click handler for Open Folder button
+		this._register(addDisposableListener(openFolderButton, EventType.CLICK, (e: MouseEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.commandService.executeCommand('workbench.action.files.openFolder');
+		}));
+
 		// Add recent list
 		const recentList = append(container, $('.recent-list'));
 
@@ -235,27 +242,22 @@ export class EditorGroupWatermark extends Disposable {
 					windowOpenable = { workspaceUri: recent.workspace.configPath };
 				}
 
-				// Split the label into name and path
 				const { name, parentPath } = splitRecentLabel(fullPath);
 
-				// Create the item content with name and path
-				const nameElement = append(itemElement, $('.name'));
-				nameElement.textContent = name;
-
+				itemElement.textContent = name;
 				if (parentPath) {
-					const pathElement = append(itemElement, $('.path'));
-					pathElement.textContent = parentPath;
+					append(itemElement, $('span.spacer'));
+					const pathSpan = append(itemElement, $('span.path'));
+					pathSpan.textContent = parentPath;
 				}
 
 				itemElement.title = fullPath;
-
-				// Add click handler
 				itemElement.style.cursor = 'pointer';
+
 				this._register(addDisposableListener(itemElement, EventType.CLICK, async (e: MouseEvent) => {
 					try {
 						e.preventDefault();
 						e.stopPropagation();
-
 						await this.hostService.openWindow([windowOpenable], {
 							forceNewWindow: e.ctrlKey || e.metaKey,
 							remoteAuthority: recent.remoteAuthority ?? null
@@ -267,17 +269,15 @@ export class EditorGroupWatermark extends Disposable {
 			});
 
 			// Add "More..." item
-			const moreItem = append(recentList, $('.recent-item.more-item'));
+			const moreItem = append(recentList, $('.more-item'));
 			moreItem.textContent = localize('watermark.more', "More...");
-			moreItem.title = localize('watermark.showMoreRecents', "Show All Recent Folders");
-			moreItem.style.cursor = 'pointer';
 
-			// Get keybinding for OpenRecentAction if available
 			const keybinding = this.keybindingService.lookupKeybinding('workbench.action.openRecent')?.getLabel();
-			if (keybinding) {
-				moreItem.title += ` (${keybinding})`;
-			}
+			moreItem.title = keybinding ?
+				localize('watermark.showMoreRecents', "Show All Recent Folders ({0})", keybinding) :
+				localize('watermark.showMoreRecents', "Show All Recent Folders");
 
+			moreItem.style.cursor = 'pointer';
 			this._register(addDisposableListener(moreItem, EventType.CLICK, (e: MouseEvent) => {
 				e.preventDefault();
 				e.stopPropagation();

src/vs/workbench/browser/parts/editor/media/editorgroupview.css

@@ -57,7 +57,8 @@
 .monaco-workbench .part.editor > .content.auxiliary .editor-group-container.empty > .editor-group-watermark-no-workspace {
 	display: flex;
 	height: 100%;
-	max-width: 290px;
+	min-width: 500px;
+	max-width: 700px;
 	margin: auto;
 	flex-direction: column;
 	align-items: center;
@@ -77,6 +78,7 @@
 	border-radius: 2px;
 	cursor: pointer;
 	font-size: 13px;
+	margin-bottom: 20px;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .open-folder-button:hover {
@@ -85,26 +87,32 @@
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list {
 	width: 100%;
-	max-width: 260px;
+	min-width: 260px;
+	max-width: 700px;
 	color: var(--vscode-editorWatermark-foreground);
 	opacity: 0.8;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item {
-	display: flex;
-	align-items: center;
-	gap: 4px;
 	padding: 4px 0;
+	cursor: pointer;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item .path {
 	opacity: 0.7;
-	margin-left: 4px;
-	font-size: 0.9em;
+}
+
+.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item:hover {
+	color: var(--vscode-foreground);
+	opacity: 1;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item:hover .path {
-	opacity: 0.9;
+	color: var(--vscode-foreground);
+	opacity: 0.8;
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-workspace > .letterpress {
@@ -239,6 +247,20 @@
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .more-item:hover {
+	color: var(--vscode-foreground);
 	opacity: 1;
 }
 
+/* When container is small, allow wrapping */
+@media (max-width: 700px) {
+	.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item {
+		white-space: normal;
+		word-break: break-all;
+	}
+}
+
+.monaco-workbench .part.editor > .content .editor-group-container > .editor-group-watermark-no-workspace .recent-list .recent-item .spacer {
+    display: inline-block;
+    width: 10px;  /* Adjust this value to increase/decrease spacing between name and path of recent items */
+}
+