adjust sidebar height

packages/app/src/styles/_search.scss

@@ -184,8 +184,8 @@
     top: 0px;
 
     .search-result-list-scroll {
-      // subtract the height of SearchControl component + a gap made above #page-wrapper and below #main
-      height: calc(100vh - 117px);
+      // subtract the height of GrowiNavbar + (SearchControl component + other factors)
+      height: calc(100vh - ($grw-navbar-total-height + 110px));
       overflow-y: scroll;
     }
     .nav.nav-pills {
@@ -276,18 +276,6 @@
   }
 }
 
-// class to add to .grw-navbar to hide its navbar above the displaying page
-body.on-search {
-  .grw-navbar {
-    position: fixed !important;
-    width: 100vw;
-  }
-  .page-wrapper {
-    position: relative;
-    top: $grw-navbar-border-width;
-  }
-}
-
 // 2021/9/22 TODO: Remove after moving to SearchResult
 .search-page-input {
   position: sticky;

packages/app/src/styles/_sidebar.scss

@@ -327,3 +327,19 @@
 .grw-sidebar-backdrop.modal-backdrop {
   z-index: $zindex-fixed + 1;
 }
+
+// style to apply when displaying search page
+.growi.on-search {
+  // set sidebar height shown in search page
+  $search-page-sidebar-height: calc(100vh - $grw-navbar-total-height);
+
+  .grw-sidebar {
+    height: $search-page-sidebar-height;
+    .data-layout-container {
+      height: $search-page-sidebar-height;
+    }
+    .grw-sidebar-nav {
+      height: $search-page-sidebar-height;
+    }
+  }
+}

packages/app/src/styles/_variables.scss

@@ -15,6 +15,7 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 //== Layout
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;
+$grw-navbar-total-height: calc($grw-navbar-height + $grw-navbar-border-width);
 
 $grw-subnav-min-height: 95px;
 $grw-subnav-min-height-md: 115px;