From 08217d4e991ca601f61e03e8658f46bdb3ade924 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Tue, 6 Dec 2022 11:41:02 +0100
Subject: [PATCH] Resolve #712

---
 dev/Styles/User/AdvancedSearch.less           |  17 +-
 .../Views/User/PopupsAdvancedSearch.html      | 174 +++++++++---------
 vendors/bootstrap/less/forms.less             |   3 +-
 3 files changed, 100 insertions(+), 94 deletions(-)

diff --git a/dev/Styles/User/AdvancedSearch.less b/dev/Styles/User/AdvancedSearch.less
index e9043f5985..cac4a1c1f3 100644
--- a/dev/Styles/User/AdvancedSearch.less
+++ b/dev/Styles/User/AdvancedSearch.less
@@ -1,11 +1,20 @@
 #V-PopupsAdvancedSearch {
-
 	max-width: 780px;
-
 	label {
 		width: 110px;
 	}
-	.span4 {
-		width: 360px;
+}
+#advancedsearchform > div {
+	display: inline-block;
+	vertical-align: top;
+	margin-right:1em;
+}
+
+@media screen and (max-width: 410px) {
+	#advancedsearchform label {
+		width: 100%;
+	}
+	#advancedsearchform label + * {
+		margin-left: 0;
 	}
 }
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
index 2789b15e71..c372c3a5dd 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html
@@ -3,108 +3,106 @@
 	<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
 </header>
 <form id="advancedsearchform" class="modal-body form-horizontal" action="#/" autocomplete="off" spellcheck="false" data-bind="submit: submitForm">
-	<div class="row">
-		<div class="span4">
-			<div class="control-group">
-				<label data-i18n="GLOBAL/FROM"></label>
-				<input type="text" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off"
-					data-bind="value: from">
-			</div>
-			<div class="control-group">
-				<label data-i18n="GLOBAL/TO"></label>
-				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
-					data-bind="value: to">
-			</div>
-			<div class="control-group">
-				<label data-i18n="GLOBAL/SUBJECT"></label>
-				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
-					data-bind="value: subject">
-			</div>
-			<div class="control-group">
-				<label data-i18n="SEARCH/TEXT"></label>
-				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
-					data-bind="value: text">
-			</div>
-			<!-- ko if: showKeywords -->
-			<div class="control-group">
-				<label data-i18n="SEARCH/KEYWORD"></label>
-				<div data-bind="component: {
-					name: 'Select',
-					params: {
-						options: keywords,
-						value: keyword,
-						optionsText: 'label',
-						optionsValue: 'value'
-					}
-				}"></div>
-			</div>
-			<!-- /ko -->
+	<div>
+		<div class="control-group">
+			<label data-i18n="GLOBAL/FROM"></label>
+			<input type="text" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off"
+				data-bind="value: from">
+		</div>
+		<div class="control-group">
+			<label data-i18n="GLOBAL/TO"></label>
+			<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
+				data-bind="value: to">
 		</div>
-		<div class="span4">
-			<div class="control-group">
-				<label data-i18n="SEARCH/DATE"></label>
+		<div class="control-group">
+			<label data-i18n="GLOBAL/SUBJECT"></label>
+			<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
+				data-bind="value: subject">
+		</div>
+		<div class="control-group">
+			<label data-i18n="SEARCH/TEXT"></label>
+			<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off"
+				data-bind="value: text">
+		</div>
+		<!-- ko if: showKeywords -->
+		<div class="control-group">
+			<label data-i18n="SEARCH/KEYWORD"></label>
+			<div data-bind="component: {
+				name: 'Select',
+				params: {
+					options: keywords,
+					value: keyword,
+					optionsText: 'label',
+					optionsValue: 'value'
+				}
+			}"></div>
+		</div>
+		<!-- /ko -->
+	</div>
+	<div>
+		<div class="control-group">
+			<label data-i18n="SEARCH/DATE"></label>
+			<div data-bind="component: {
+				name: 'Select',
+				params: {
+					options: selectedDates,
+					value: selectedDateValue,
+					optionsText: 'name',
+					optionsValue: 'id'
+				}
+			}"></div>
+		</div>
+		<div class="control-group">
+			<label data-i18n="SEARCH/REPLIED"></label>
+			<div data-bind="component: {
+				name: 'Select',
+				params: {
+					options: repliedOptions,
+					value: repliedValue,
+					optionsText: 'name',
+					optionsValue: 'id'
+				}
+			}"></div>
+		</div>
+		<!-- ko if: showMultisearch -->
+		<div class="control-group">
+			<label data-i18n="SEARCH/SUBFOLDERS"></label>
+			<div data-bind="component: {
+				name: 'Select',
+				params: {
+					options: selectedTree,
+					value: selectedTreeValue,
+					optionsText: 'name',
+					optionsValue: 'id'
+				}
+			}"></div>
+		</div>
+		<!-- /ko -->
+		<div class="control-group">
+			<label></label>
+			<div>
 				<div data-bind="component: {
-					name: 'Select',
+					name: 'Checkbox',
 					params: {
-						options: selectedDates,
-						value: selectedDateValue,
-						optionsText: 'name',
-						optionsValue: 'id'
+						label: 'SEARCH/UNSEEN',
+						value: unseen
 					}
 				}"></div>
-			</div>
-			<div class="control-group">
-				<label data-i18n="SEARCH/REPLIED"></label>
 				<div data-bind="component: {
-					name: 'Select',
+					name: 'Checkbox',
 					params: {
-						options: repliedOptions,
-						value: repliedValue,
-						optionsText: 'name',
-						optionsValue: 'id'
+						label: 'SEARCH/FLAGGED',
+						value: starred
 					}
 				}"></div>
-			</div>
-			<!-- ko if: showMultisearch -->
-			<div class="control-group">
-				<label data-i18n="SEARCH/SUBFOLDERS"></label>
 				<div data-bind="component: {
-					name: 'Select',
+					name: 'Checkbox',
 					params: {
-						options: selectedTree,
-						value: selectedTreeValue,
-						optionsText: 'name',
-						optionsValue: 'id'
+						label: 'SEARCH/HAS_ATTACHMENT',
+						value: hasAttachment
 					}
 				}"></div>
 			</div>
-			<!-- /ko -->
-			<div class="control-group">
-				<label></label>
-				<div>
-					<div data-bind="component: {
-						name: 'Checkbox',
-						params: {
-							label: 'SEARCH/UNSEEN',
-							value: unseen
-						}
-					}"></div>
-					<div data-bind="component: {
-						name: 'Checkbox',
-						params: {
-							label: 'SEARCH/FLAGGED',
-							value: starred
-						}
-					}"></div>
-					<div data-bind="component: {
-						name: 'Checkbox',
-						params: {
-							label: 'SEARCH/HAS_ATTACHMENT',
-							value: hasAttachment
-						}
-					}"></div>
-				</div>
-			</div>
 		</div>
 	</div>
 </form>
diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less
index 267f48c455..1a802fe9e8 100644
--- a/vendors/bootstrap/less/forms.less
+++ b/vendors/bootstrap/less/forms.less
@@ -45,6 +45,7 @@ input {
   padding: 4px 6px;
   color: var(--input-clr, #555);
   border-radius: var(--input-border-radius, 3px);
+  width: 210px;
 }
 
 textarea,
@@ -53,7 +54,6 @@ input {
   border: 1px solid var(--input-border-clr, #ccc);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   transition: border linear .2s, box-shadow linear .2s;
-  width: 210px;
 
   // Focus state
   &:focus {
@@ -87,7 +87,6 @@ select, .select {
   border: 1px solid var(--input-border-clr, #ccc);
   cursor: pointer;
   padding-right: 1.5em;
-  width: 223px; // default input width + 10px of padding that doesn't get applied
 }
 
 // Focus for select, file, radio, and checkbox