js set height for the search results panel

ui2/src/components/SearchResults/ActionButtons.tsx

@@ -1,11 +1,33 @@
+import {useRef, useEffect} from "react"
 import {Group} from "@mantine/core"
+import {useViewportSize} from "@mantine/hooks"
+import {useDispatch} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
+import {updateSearchActionPanel} from "@/slices/sizes"
+
 import GoBackButton from "./GoBackButton"
 import OpenInOtherPanelCheckbox from "./OpenInOtherPanelCheckbox"
 
 export default function ActionButtons() {
+  const {height, width} = useViewportSize()
+  const dispatch = useDispatch()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref?.current) {
+      let value = 0
+      const styles = window.getComputedStyle(ref?.current)
+      value = parseInt(styles.marginTop)
+      value += parseInt(styles.marginBottom)
+      value += parseInt(styles.paddingBottom)
+      value += parseInt(styles.paddingTop)
+      value += parseInt(styles.height)
+      dispatch(updateSearchActionPanel(value))
+    }
+  }, [width, height])
+
   return (
-    <Group justify="space-between">
+    <Group ref={ref} justify="space-between">
       <Group>
         <GoBackButton />
         <OpenInOtherPanelCheckbox />

ui2/src/components/SearchResults/SearchResults.module.css

@@ -0,0 +1,3 @@
+.content {
+  overflow: auto;
+}

ui2/src/components/SearchResults/SearchResults.tsx

@@ -1,4 +1,4 @@
-import {Flex} from "@mantine/core"
+import {Stack} from "@mantine/core"
 import {useDispatch, useSelector} from "react-redux"
 import Pagination from "@/components/Pagination"
 import type {RootState} from "@/app/types"
@@ -18,10 +18,15 @@ import {
 } from "@/slices/dualPanel/dualPanel"
 import ActionButtons from "./ActionButtons"
 import SearchResultItems from "./SearchResultItems"
+import {selectSearchContentHeight} from "@/slices/sizes"
 import {NType, PanelMode} from "@/types"
+import classes from "./SearchResults.module.css"
 
 export default function SearchResults() {
   const dispatch = useDispatch()
+  const height = useSelector((state: RootState) =>
+    selectSearchContentHeight(state)
+  )
   const lastPageSize = useSelector((state: RootState) =>
     selectLastPageSize(state, "secondary")
   )
@@ -95,16 +100,20 @@ export default function SearchResults() {
   return (
     <div>
       <ActionButtons />
-      <Flex style={{height: "740px"}}>
+      <Stack
+        className={classes.content}
+        justify={"space-between"}
+        style={{height: `${height}px`}}
+      >
         <SearchResultItems onClick={onClick} />
-      </Flex>
 
-      <Pagination
-        pagination={pagination}
-        onPageNumberChange={onPageNumberChange}
-        onPageSizeChange={onPageSizeChange}
-        lastPageSize={PAGINATION_DEFAULT_ITEMS_PER_PAGES}
-      />
+        <Pagination
+          pagination={pagination}
+          onPageNumberChange={onPageNumberChange}
+          onPageSizeChange={onPageSizeChange}
+          lastPageSize={PAGINATION_DEFAULT_ITEMS_PER_PAGES}
+        />
+      </Stack>
     </div>
   )
 }

ui2/src/slices/sizes.ts

@@ -4,6 +4,10 @@ import {RootState} from "@/app/types"
 
 const SMALL_BOTTOM_MARGIN = 3 /* pixles */
 
+type SearchPanelSizes = {
+  actionPanelHeight: number
+}
+
 // i.e Commander's panel, viewer's panel
 type PanelSizes = {
   actionPanelHeight: number
@@ -15,6 +19,7 @@ type Sizes = {
   windowInnerHeight: number
   main: PanelSizes
   secondary?: PanelSizes
+  search?: SearchPanelSizes
 }
 
 type DualArg = {
@@ -76,14 +81,28 @@ const sizesSlice = createSlice({
           }
         }
       }
+    },
+    updateSearchActionPanel(state, action: PayloadAction<number>) {
+      state.windowInnerHeight = window.innerHeight
+      if (state.search) {
+        state.search.actionPanelHeight = action.payload
+      } else {
+        state.search = {
+          actionPanelHeight: action.payload
+        }
+      }
     }
   }
 })
 
 export default sizesSlice.reducer
 
-export const {updateOutlet, updateActionPanel, updateBreadcrumb} =
-  sizesSlice.actions
+export const {
+  updateOutlet,
+  updateActionPanel,
+  updateSearchActionPanel,
+  updateBreadcrumb
+} = sizesSlice.actions
 
 export const selectContentHeight = (state: RootState, mode: PanelMode) => {
   let height: number = state.sizes.windowInnerHeight
@@ -105,3 +124,18 @@ export const selectContentHeight = (state: RootState, mode: PanelMode) => {
 
   return height
 }
+
+export const selectSearchContentHeight = (state: RootState) => {
+  let height: number = state.sizes.windowInnerHeight
+
+  height -= state.sizes.outletTopMarginAndPadding
+
+  if (state.sizes.search) {
+    height -= state.sizes.search.actionPanelHeight
+  }
+
+  /* Let there be a small margin at the bottom of the viewport */
+  height -= SMALL_BOTTOM_MARGIN
+
+  return height
+}