Adjust the laying-out of some components and some refactoring

client/bundle.js

@@ -7677,17 +7677,14 @@
 	      <div class="search-main-side">
 
 	        <div class="search-box" >
-	          <div class="search-query-wrapper" style="float: left;">
+	          <div class="search-query-wrapper" >
 	            <div class="search-query-box" style="float: left;">
 	            </div>
 	            <button class="clean-btn" style="float: right;">Clear all</button>
 	          </div>
 
-	          <button style="float: right" class="search-btn" >Search</button>
-	          <div style="clear: both;"></div>
-	          <div class="exclusive-search-line">
-	             Exclusive search <input class="exclusive-search" type="checkbox" >
-	          </div>
+	          <button class="search-btn" >Search</button>
+	          
 	        </div>
 
 

client/css/styles.css

@@ -309,18 +309,22 @@ div.title span.unfolded::before{
 
 }
 
+
+
 .search-filter-side{
   background-color: #DDD;
   padding: 10px 16px;
 }
 
-.exclusive-search-line{
-  margin: 4px auto;
-  font-size: 0.85em;
-  text-align: left;
+
+
+.search-box{
+  width: 742px;
+  display: flex;
+  justify-content: center; /*space-between;*/
 }
 .search-query-wrapper{
-  width: 85%;
+  flex-grow: 14;
   background-color: white; border: 2px solid  #E56400;
   padding: 8px 6px;
 }
@@ -335,7 +339,9 @@ div.title span.unfolded::before{
 }
 
 .search-btn{
-  width: 94px;
+  /*width: 94px;*/
+  display: block;
+  flex-grow: 1;
   background-color: #E56400;
   color: white;
   padding: 16px;
@@ -624,7 +630,7 @@ div#specialRows{margin: 30px 40px;}
 
 
 
-#matlist{ width: 690px; margin: 0 auto 80px;}
+#matlist{ width: 742px; margin: 40px auto 40px;}
 
 /* #paginationWg erased*/
 #matlist .formula {
@@ -644,6 +650,12 @@ span.prevButton{ display: inline-block; cursor: pointer;}
 span.page{ display: inline-block; }
 span.nextButton{ display: inline-block; cursor: pointer;}
 
+.data-container table{
+  margin: auto;
+  width: 96%;
+}
+
+
 
 /*#paginationWg  .left { float: left }
 #paginationWg  .right { float: right }*/

client/src/search-mod/NewSearchMod.js

@@ -70,17 +70,14 @@ class NewSearchMod {
       <div class="search-main-side">
 
         <div class="search-box" >
-          <div class="search-query-wrapper" style="float: left;">
+          <div class="search-query-wrapper" >
             <div class="search-query-box" style="float: left;">
             </div>
             <button class="clean-btn" style="float: right;">Clear all</button>
           </div>
 
-          <button style="float: right" class="search-btn" >Search</button>
-          <div style="clear: both;"></div>
-          <div class="exclusive-search-line">
-             Exclusive search <input class="exclusive-search" type="checkbox" >
-          </div>
+          <button class="search-btn" >Search</button>
+          
         </div>