TreeView: SearchBox: Add missing styles

This was affecting any place were the searchbox was appearing:
- Sheetview dialog
- Autofilter popup

where the searchbox was looking very retro (bevels)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Id2f4f1c347dda99f858c617212ba2c7274f2b704

Author: pedropintosilva

browser/css/jsdialogs.css

@@ -1015,7 +1015,11 @@ img.context-menu-icon {
 	padding-inline: 4px;
 }
 
-#search_edit.ui-edit.autofilter {
+.ui-treeview-search-input.jsdialog.ui-edit {
+	line-height: var(--default-height);
+}
+.autofilter .ui-treeview-search-input.jsdialog.ui-edit,
+.autofilter .ui-treeview-search-input.jsdialog.ui-edit:hover {
 	width: 100%;
 	width: -moz-available;
 	width: -webkit-fill-available;

browser/src/control/jsdialog/Widget.TreeView.ts

@@ -1630,6 +1630,10 @@ class TreeViewControl {
 		const searchBox = document.createElement('input');
 		searchBox.id = JSDialog.MakeIdUnique('ui-treeview-search-input'); // Form fields should have either a name or an ID - using this instead of a class
 		searchBox.type = 'search';
+		searchBox.setAttribute(
+			'class',
+			'jsdialog ui-edit ui-treeview-search-input',
+		);
 		searchBox.setAttribute('aria-label', _('Search items'));
 		searchBox.setAttribute('aria-controls', this._container.id);
 		searchBox.placeholder = _('Search...');