reorganize DOM for search page

apps/app/src/components/Layout/SearchResultLayout.module.scss

@@ -3,7 +3,7 @@
 
 .on-search :global {
   .page-wrapper {
-    padding-bottom: unset;
+    height: 100vh;
   }
 
   .search-control-include-options {
@@ -12,15 +12,6 @@
     }
   }
   .search-result-list {
-    .search-result-list-scroll {
-      // subtract the height of (SearchControl component + other factors)
-      height: calc(100vh - 110px);
-      overflow-y: scroll;
-
-      @include bs.media-breakpoint-down(sm) {
-        height: calc(100vh - (var.$grw-navbar-bottom-height + 123px));
-      }
-    }
 
     .search-result-keyword {
       font-size: 17.5px;
@@ -54,7 +45,6 @@
     }
 
     .search-result-content {
-      height: 100vh;
 
       > h2 {
         margin-right: 10px;
@@ -67,12 +57,6 @@
       }
 
       .search-result-content-body-container {
-        // correct apply overflow scrolling for react-markdown on Google Chrome
-        // see: https://github.com/weseek/growi/pull/6731
-        position: relative;
-
-        overflow-y: auto;
-
         .wiki {
           padding: 16px;
           font-size: 14px;
@@ -81,16 +65,3 @@
     }
   }
 }
-
-// style to apply when displaying search page
-.on-search :global {
-  // set sidebar height shown in search page
-  $search-page-sidebar-height: 100vh;
-
-  .grw-sidebar {
-    height: $search-page-sidebar-height;
-    .data-layout-container {
-      height: 100%;
-    }
-  }
-}

apps/app/src/components/Layout/SearchResultLayout.tsx

@@ -12,9 +12,7 @@ const SearchResultLayout = ({ children }: Props): JSX.Element => {
 
   return (
     <BasicLayout className={`on-search ${commonStyles['on-search']}`}>
-      <div id="main" className="main search-page mt-0">
-        { children }
-      </div>
+      { children }
     </BasicLayout>
   );
 };

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

@@ -71,7 +71,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
   }, [initialSearchConditions.keyword]);
 
   return (
-    <div className="position-sticky sticky-top shadow-sm">
+    <div className="shadow-sm">
       <div className="grw-search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchForm

apps/app/src/components/SearchPage/SearchPageBase.tsx

@@ -169,13 +169,13 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
     : undefined;
 
   return (
-    <div className="search-result-base d-flex" data-testid="search-result-base">
+    <div className="search-result-base flex-grow-1 d-flex overflow-y-auto" data-testid="search-result-base">
 
-      <div className="mw-0 flex-grow-1 flex-basis-0 border boder-gray search-result-list" id="search-result-list">
+      <div className="flex-expand-vert border boder-gray search-result-list" id="search-result-list">
 
         {searchControl}
 
-        <div className="search-result-list-scroll">
+        <div className="overflow-y-scroll">
 
           {/* Loading */}
           { pages == null && (
@@ -213,7 +213,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
 
       </div>
 
-      <div className="mw-0 flex-grow-1 flex-basis-0 d-none d-lg-block search-result-content">
+      <div className="flex-expand-vert d-none d-lg-flex search-result-content">
         {pages != null && pages.length !== 0 && selectedPageWithMeta != null && (
           <SearchResultContent
             pageWithMeta={selectedPageWithMeta}

apps/app/src/components/SearchPage/SearchResultContent.tsx

@@ -206,7 +206,13 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   const isRenderable = page != null && rendererOptions != null;
 
   return (
-    <div key={page._id} data-testid="search-result-content" className={`search-result-content ${styles['search-result-content']} d-flex flex-column`}>
+    <div
+      key={page._id}
+      data-testid="search-result-content"
+      className={`search-result-content ${styles['search-result-content']}
+        dynamic-layout-root
+        overflow-y-auto`}
+    >
       <div className="grw-page-path-text-muted-container">
         { isRenderable && (
           <GrowiSubNavigation
@@ -218,7 +224,11 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
           />
         ) }
       </div>
-      <div id="search-result-content-body-container" className="search-result-content-body-container" ref={scrollElementRef}>
+      <div
+        id="search-result-content-body-container"
+        ref={scrollElementRef}
+        className="search-result-content-body-container main container-lg grw-container-convertible overflow-y-scroll"
+      >
         { isRenderable && (
           <RevisionLoader
             rendererOptions={rendererOptions}

apps/app/src/pages/_search.page.tsx

@@ -73,9 +73,7 @@ const SearchResultPage: NextPageWithLayout<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
 
-      <div id="search-page" className="dynamic-layout-root">
-        <SearchPage />
-      </div>
+      <SearchPage />
     </>
   );
 };