Fixing filter layout

microsoft · Jun 29, 2023 · 5d91b00 · 5d91b00
1 parent fb8c973
commit 5d91b00
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts
@@ -67,7 +67,7 @@ const CLEAR_COLUMN_HEADER = localize('objectExplorer.clearColumnHeader', "Clear"
 const TRUE_SELECT_BOX = localize('objectExplorer.trueSelectBox', "True");
 const FALSE_SELECT_BOX = localize('objectExplorer.falseSelectBox', "False");
 
-function nodePathDisplayString(nodepath: string): string { return localize('objectExplorer.nodePath', "Path: {0}", nodepath) }
+const SUBTITLE_LABEL = localize('objectExplorer.nodePath', "Path:");
 
 const PROPERTY_COLUMN_ID = 'property';
 const OPERATOR_COLUMN_ID = 'operator';
@@ -139,7 +139,12 @@ export class FilterDialog extends Modal {
 	protected renderBody(container: HTMLElement): void {
 		const body = DOM.append(container, DOM.$('.filter-dialog-body'));
 		const subtitle = DOM.append(body, DOM.$('.filter-dialog-node-path'));
-		subtitle.innerText = nodePathDisplayString(this._filterDialogSubtitle);
+		const subtileLabel = DOM.append(subtitle, DOM.$('.filter-dialog-node-path-label'));
+		subtileLabel.innerText = SUBTITLE_LABEL;
+		const subtilteText = DOM.append(subtitle, DOM.$('.filter-dialog-node-path-text'));
+		const nodePathText = this._filterDialogSubtitle;
+		subtilteText.title = nodePathText;
+		subtilteText.innerText = nodePathText;
 		const clauseTableContainer = DOM.append(body, DOM.$('.filter-table-container'));
 		const filter = DOM.append(clauseTableContainer, DOM.$('.filter-table'));
 		this._tableCellEditorFactory = new TableCellEditorFactory(

diff --git a/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css b/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css
@@ -17,13 +17,28 @@
 }
 
 .filter-dialog-body .filter-dialog-node-path {
+	display: flex;
+	width: 100%;
+}
+
+.filter-dialog-body .filter-dialog-node-path-label {
 	padding: 10px 0px;
 	font-size: 13px;
 	font-weight: 600;
-	max-width: 100%;
-	text-overflow: ellipsis;
-	overflow: hidden;
 	white-space: nowrap;
+	display: inline-block;
+	width: 40px;
+	flex: 0 0 40px;
+}
+
+.filter-dialog-body .filter-dialog-node-path-text {
+	padding: 10px 0px;
+	font-size: 13px;
+	white-space: nowrap;
+	display: inline-block;
+	flex: 1;
+	white-space: initial;
+	overflow-wrap: anywhere;
 }
 
 .filter-table-container {