Merge pull request #4733 from weseek/feat/80324-81761-fix-search-control-position

feat/81761 fix searchControl position

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -47,7 +47,7 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   return (
-    <>
+    <div className="position-sticky fixed-top">
       <div className="search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny
@@ -62,7 +62,7 @@ const SearchControl: FC <Props> = (props: Props) => {
         </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
-      <div className="d-flex align-items-center py-2 border-bottom border-gray">
+      <div className="search-control d-flex align-items-center py-2 border-bottom border-gray">
         <div className="d-flex mr-auto ml-4">
           {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
           <DeleteSelectedPageGroup
@@ -96,7 +96,7 @@ const SearchControl: FC <Props> = (props: Props) => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -28,7 +28,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
       <div className="search-result d-flex" id="search-result">
         <div className="flex-grow-1 flex-basis-0 page-list border boder-gray search-result-list" id="search-result-list">
 
-          <nav><SearchControl></SearchControl></nav>
+          <SearchControl></SearchControl>
           <div className="d-flex align-items-center justify-content-between my-3 ml-4">
             <div className="search-result-meta text-nowrap mr-3">
               <span className="font-weight-light">{t('search_result.result_meta')} </span>

packages/app/src/styles/theme/_apply-colors.scss

@@ -589,6 +589,9 @@ body.pathname-sidebar {
  */
 .search-result {
   .search-result-list {
+    .search-control {
+      background-color: $bgcolor-global;
+    }
     .page-list {
       .highlighted-keyword {
         background-color: $bgcolor-keyword-highlighted;