ui: make datatable scrollable and occupy the whole page

Author: zjp-CN

ui/app/assets/css/main.css

@@ -0,0 +1,7 @@
+
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* forbid scrolling */
+}
+

ui/app/assets/css/tailwind.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
 @import "tailwindcss-primeui";
 
-@custom-variant dark (&:where(.my-app-dark, .my-app-dark *));     //dark mode configuration
+/* dark mode configuration */
+@custom-variant dark (&:where(.my-app-dark, .my-app-dark *));

ui/app/components/Kani.vue

@@ -4,14 +4,6 @@ import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList,
 import { useStyleStore } from "~/stores/style";
 
 const { viewportHeight } = storeToRefs(useStyleStore());
-const colStyle = (ratio: number) => {
-  const style = {
-    "width": `${Math.round(viewportHeight.value * ratio)}px`,
-    "white-space": "normal", "word-break": "break-word",
-  };
-  console.log(style);
-  return style;
-};
 
 const raw = ref<VecMergeHashKaniList>([]);
 // Download JSON
@@ -37,8 +29,9 @@ useHead({ title: "Verify Rust Std - Kani" });
 
 <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" 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-2"
+    :scrollHeight="`${(viewportHeight - 100) * 0.8}px`" v-model:filters="filters" :globalFilterFields="FILTERS.fields"
+    currentPageReportTemplate="{first} to {last} of {totalRecords}">
 
     <template #header>
       <div class="flex justify-between items-center">

ui/nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   ssr: false, // Client-side Only Rendering (SPA)
-  css: ["primeicons/primeicons.css"],
+  css: ["primeicons/primeicons.css", "~/assets/css/main.css"],
   typescript: { typeCheck: true },
   modules: [
     '@primevue/nuxt-module',
@@ -20,4 +20,4 @@ export default defineNuxtConfig({
       }
     }
   }
-})
+})