ui: define viewportWidth to avoid horizontal scrollbar; minor style fix

Author: zjp-CN

ui/app/assets/css/main.css

@@ -7,7 +7,7 @@ html, body {
 
 /* Scrolbar Styling */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 10px;
   height: 8px;
 }
 ::-webkit-scrollbar-thumb {

ui/app/components/Kani.vue

@@ -5,7 +5,7 @@ import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList,
 import { useDarkStore, useStyleStore } from "~/stores/style";
 
 // Compute absolute scrollHeight for DataTable.
-const { color, viewportHeight } = storeToRefs(useStyleStore());
+const { color, viewportHeight, viewportWidth } = storeToRefs(useStyleStore());
 const { fontColor } = storeToRefs(useDarkStore());
 
 const raw = ref<VecMergeHashKaniList>([]);
@@ -35,8 +35,8 @@ 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" tableClass="m-1"
-    :scrollHeight="`${Math.round(viewportHeight * 0.78)}px`" v-model:filters="filters"
+    v-model:multi-sort-meta="multiSort" stripedRows :tableStyle="{ width: `${Math.round(viewportWidth - 10)}px` }"
+    tableClass="p-1" :scrollHeight="`${Math.round(viewportHeight * 0.78)}px`" v-model:filters="filters"
     :globalFilterFields="FILTERS.fields" currentPageReportTemplate="{first} to {last} of {totalRecords}">
 
     <template #header>

ui/app/layouts/default.vue

@@ -26,7 +26,7 @@ if (isInitDark) {
 
 <template>
   <div>
-    <div class="flex justify-between p-2">
+    <div class="flex justify-between p-1">
       <div></div>
       <div>
         <Button :icon='dark ? "pi pi-sun" : "pi pi-moon"' @click="toggleTheme" severity="contrast" raised />

ui/app/shared/utils/kani.ts

@@ -32,7 +32,7 @@ export interface MergeKaniColumn {
 export const MergeKaniColumns: MergeKaniColumn[] = [
   {
     key: "file",
-    col: { field: "file", header: "File Path", width: "18%", sortable: true },
+    col: { field: "file", header: "File Path", width: "15%", sortable: true },
   },
   {
     key: "func",

ui/app/stores/style.ts

@@ -4,6 +4,7 @@ export const useStyleStore = defineStore("style", () => {
     primary: "white", orange: "orange", orange_light: "orange",
   });
   const viewportHeight = ref(800);
+  const viewportWidth = ref(800);
 
   onMounted(() => {
     // Get styles after computation.
@@ -17,14 +18,16 @@ export const useStyleStore = defineStore("style", () => {
     color.orange_light = styles.getPropertyValue("--p-orange-400").trim();
     color.orange = styles.getPropertyValue("--p-orange-500").trim();
 
-    // Get heights
+    // Get heights and widths.
     viewportHeight.value = window.innerHeight;
+    viewportWidth.value = window.innerWidth;
     window.addEventListener("resize", () => {
       viewportHeight.value = window.innerHeight;
+      viewportWidth.value = window.innerWidth;
     });
   });
 
-  return { color, viewportHeight }
+  return { color, viewportHeight, viewportWidth }
 });
 
 /** Styling based on dark theme mode. */