incr: w-desk lines for header, listview and report

src/components/PageHeader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="my-4 mx-4 flex justify-between window-drag">
-    <h1 class="text-2xl font-bold select-none" v-if="title && !backLink">
+  <div class="p-4 flex justify-between window-drag border-b items-center">
+    <h1 class="text-xl font-semibold select-none" v-if="title && !backLink">
       {{ title }}
     </h1>
     <BackLink v-if="backLink" class="window-no-drag"/>

src/components/Report/ListReport.vue

@@ -4,9 +4,12 @@
     <div class="overflow-hidden" v-if="dataSlice.length">
       <!--Title Row -->
       <div
-        class="w-full overflow-x-hidden flex items-center border-b"
+        class="w-full overflow-x-hidden flex items-center border-b px-4"
         ref="titlerow"
-        :style="{ height: `${hconst}px`, paddingRight: '8px' }"
+        :style="{
+          height: `${hconst}px`,
+          paddingRight: 'calc(var(--w-scrollbar) + 1rem)',
+        }"
       >
         <div
           v-for="(col, c) in report.columns"
@@ -33,8 +36,11 @@
         <template v-for="(row, r) in dataSlice" :key="r + '-row'">
           <div
             v-if="!row.folded"
-            class="flex items-center w-max"
-            :style="{ height: `${hconst}px` }"
+            class="flex items-center w-max px-4"
+            :style="{
+              height: `${hconst}px`,
+              minWidth: `calc(var(--w-desk) - var(--w-scrollbar))`,
+            }"
             :class="[
               r !== pageEnd - 1 ? 'border-b' : '',
               row.isGroup ? 'hover:bg-gray-100 cursor-pointer' : '',

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2 h-full flex justify-between flex-col bg-gray-100"
+    class="p-2 h-full flex justify-between flex-col"
     :class="{
       'window-drag': platform !== 'Windows',
     }"

src/components/WithScroll.vue

@@ -25,8 +25,8 @@ export default {
 
 <style>
 .scroll-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--w-scrollbar);
+  height: var(--w-scrollbar);
 }
 .scroll-container::-webkit-scrollbar-thumb {
   background-color: theme('colors.gray.100');

src/pages/Desk.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex overflow-hidden">
     <Sidebar
-      class="w-sidebar flex-shrink-0"
+      class="w-sidebar flex-shrink-0 border-r"
       @change-db-file="$emit('change-db-file')"
     />
     <div class="flex flex-1 overflow-y-hidden bg-white">

src/pages/ListView/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-4 text-base flex flex-col overflow-y-hidden">
+  <div class="text-base flex flex-col overflow-y-hidden">
     <!-- Title Row -->
     <div class="flex items-center">
       <p class="w-8 text-right mr-4 text-gray-700">#</p>
@@ -56,7 +56,7 @@
     <!-- Pagination Footer -->
     <div class="mt-auto" v-if="data?.length">
       <hr />
-      <Paginator :item-count="data.length" @index-change="setPageIndices" />
+      <Paginator :item-count="data.length" @index-change="setPageIndices" class="px-4"/>
     </div>
 
     <!-- Empty State -->

src/pages/Report.vue

@@ -13,7 +13,7 @@
     </PageHeader>
 
     <!-- Filters -->
-    <div v-if="report" class="mx-4 grid grid-cols-5 gap-2">
+    <div v-if="report" class="grid grid-cols-5 gap-2 p-4 border-b">
       <FormControl
         v-for="field in report.filters"
         size="small"
@@ -30,7 +30,7 @@
     </div>
 
     <!-- Report Body -->
-    <ListReport v-if="report" :report="report" class="mx-4 mt-4" />
+    <ListReport v-if="report" :report="report" class="" />
   </div>
 </template>
 <script>

src/styles/index.css

@@ -61,10 +61,16 @@ html {
   height: 800px;
 }
 
+:root {
+  --w-sidebar: 12rem;
+  --w-desk: calc(100vw - 12rem);
+  --w-scrollbar: 8px;
+}
+
 .w-sidebar {
-  width: 12rem;
+  width: var(--w-sidebar);
 }
 
 .w-desk {
-  width: calc(100vw - 12rem);
+  width: var(--w-desk);
 }