ui: remove topbarHeight due to inaccuracy

neither did slot height in flex layout work

Author: zjp-CN

ui/app/components/Kani.vue

@@ -3,8 +3,8 @@ import { ofetch } from "ofetch";
 import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList, FILTERS, ProofKind } from "~/shared/utils/kani";
 import { useStyleStore } from "~/stores/style";
 
-const { restHeight } = storeToRefs(useStyleStore());
-watch(restHeight, val => console.log(val));
+// Compute absolute scrollHeight for DataTable.
+const { viewportHeight } = storeToRefs(useStyleStore());
 
 const raw = ref<VecMergeHashKaniList>([]);
 // Download JSON
@@ -29,10 +29,11 @@ useHead({ title: "Verify Rust Std - Kani" });
 </script>
 
 <template>
+
   <DataTable :value="raw" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" sortMode="multiple" removableSort
-    v-model:multi-sort-meta="multiSort" stripedRows tableStyle="min-width: 20rem" tableClass="m-2"
-    :scrollHeight="`${restHeight - 10}px`" v-model:filters="filters" :globalFilterFields="FILTERS.fields"
-    currentPageReportTemplate="{first} to {last} of {totalRecords}">
+    v-model:multi-sort-meta="multiSort" stripedRows tableStyle="min-width: 20rem" tableClass="m-1"
+    :scrollHeight="`${Math.round(viewportHeight * 0.78)}px`" v-model:filters="filters"
+    :globalFilterFields="FILTERS.fields" currentPageReportTemplate="{first} to {last} of {totalRecords}">
 
     <template #header>
       <div class="flex justify-between items-center">

ui/app/layouts/default.vue

@@ -21,7 +21,7 @@ if (localStorage.getItem(KEY) === DARK) {
 
 <template>
   <div>
-    <div class="flex justify-between p-2" id="topbar">
+    <div class="flex justify-between p-2">
       <div></div>
       <div>
         <Button :icon='dark ? "pi pi-sun" : "pi pi-moon"' @click="toggleTheme" severity="contrast" raised />

ui/app/stores/style.ts

@@ -4,8 +4,6 @@ export const useStyleStore = defineStore("style", () => {
     topButton: "white", orange: "orange", orange_light: "orange",
   });
   const viewportHeight = ref(800);
-  const topbarHeight = ref(800);
-  const restHeight = computed(() => viewportHeight.value - topbarHeight.value);
 
   onMounted(() => {
     // Get styles after computation.
@@ -21,14 +19,11 @@ export const useStyleStore = defineStore("style", () => {
 
     // Get heights
     viewportHeight.value = window.innerHeight;
-    topbarHeight.value = document.getElementById("topbar")?.offsetHeight ?? 800;
     window.addEventListener("resize", () => {
       viewportHeight.value = window.innerHeight;
-      topbarHeight.value = document.getElementById("topbar")?.offsetHeight ?? 800;
     });
-
   });
 
-  return { color, viewportHeight, topbarHeight, restHeight }
+  return { color, viewportHeight }
 });