Improved and solve #847

dev/Styles/User/FolderList.less

@@ -15,7 +15,7 @@
 	}
 
 	input {
-		width: calc(100% - 37px);
+		width: calc(100% - 8px);
 		margin-left: 4px;
 	}
 

dev/Styles/User/Layout.less

@@ -177,6 +177,23 @@ html.rl-side-preview-pane {
 	border-radius: var(--input-border-radius, 3px) !important;
 }
 
+.search-input-wrp {
+	position: relative;
+}
+.search-input-wrp a {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	margin: 0 7px;
+	z-index: 100;
+	opacity: .4;
+	cursor: pointer;
+
+	&:hover {
+		opacity: .6;
+	}
+}
+
 /* desktop */
 @media screen and (min-width: 1000px) {
 }

dev/Styles/User/MessageList.less

@@ -79,13 +79,6 @@ html.rl-no-preview-pane {
 		padding-right: 8px;
 	}
 
-	.btn.buttonClearFolderSearchInput {
-		font-size: 14px;
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-bottom: 4px;
-	}
-
 	.second-toolbar {
 		display: flex;
 		flex-shrink: 0;
@@ -107,8 +100,6 @@ html.rl-no-preview-pane {
 
 	.search-input-wrp {
 		flex-grow: 1;
-		position: relative;
-		text-align: right;
 	}
 
 	.inputSearch {
@@ -116,19 +107,6 @@ html.rl-no-preview-pane {
 		width: 100%;
 	}
 
-	.closeSearch {
-		position: absolute;
-		right: 0;
-		top: 5px;
-		margin: 0 7px;
-		z-index: 100;
-		vertical-align: middle;
-		opacity: .4;
-		&:hover {
-			opacity: .6;
-		}
-	}
-
 	.b-content {
 		height: 100%;
 		padding: 0;

dev/View/User/MailBox/FolderList.js

@@ -206,6 +206,10 @@ export class MailFolderList extends AbstractViewLeft {
 		showMessageComposer();
 	}
 
+	clearFolderSearch() {
+		foldersFilter('');
+	}
+
 	createFolder() {
 		showScreenPopup(FolderCreatePopupView);
 	}

dev/View/User/MailBox/MessageList.js

@@ -818,10 +818,6 @@ export class MailMessageList extends AbstractViewRight {
 		showScreenPopup(AdvancedSearchPopupView, [MessagelistUserStore.mainSearch()]);
 	}
 
-	clearFolderSearchClick() {
-		document.getElementById("folderSearchInput").value = "";
-	}
-
 	groupSearch(group) {
 		group.search && MessagelistUserStore.mainSearch(group.search);
 	}

snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html

@@ -20,9 +20,9 @@
 			</li>
 		</ul>
 		<hr>
-		<div class="search-input-wrp">
-			<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
-			<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput">✕</a>
+		<div class="search-input-wrp" data-bind="visible: foldersFilterVisible">
+			<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter" data-i18n="[placeholder]GLOBAL/SEARCH">
+			<a data-bind="click: clearFolderSearch, visible: foldersFilter">✕</a>
 		</div>
 		<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
 		<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>