diff --git a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts index 08acb39681..6b3c8f304a 100644 --- a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts +++ b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts @@ -66,7 +66,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'; @@ -138,7 +138,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 index 0b69a9b71f..6ee4d9ac98 100644 --- a/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css +++ b/src/sql/workbench/services/objectExplorer/browser/media/filterDialog.css @@ -17,9 +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; + 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 {