From b8cfddedaf06047fc2231d86f09f326e84a7a317 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 31 May 2022 14:39:06 +0530
Subject: [PATCH] incr: w-desk lines for header, listview and report

---
 src/components/PageHeader.vue        |  4 ++--
 src/components/Report/ListReport.vue | 14 ++++++++++----
 src/components/Sidebar.vue           |  2 +-
 src/components/WithScroll.vue        |  4 ++--
 src/pages/Desk.vue                   |  2 +-
 src/pages/ListView/List.vue          |  4 ++--
 src/pages/Report.vue                 |  4 ++--
 src/styles/index.css                 | 10 ++++++++--
 8 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 523ea15e..0e7c367f 100644
--- a/src/components/PageHeader.vue
+++ b/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"/>
diff --git a/src/components/Report/ListReport.vue b/src/components/Report/ListReport.vue
index 865d898b..1202cfa6 100644
--- a/src/components/Report/ListReport.vue
+++ b/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' : '',
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1b994b02..ec6f80d9 100644
--- a/src/components/Sidebar.vue
+++ b/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',
     }"
diff --git a/src/components/WithScroll.vue b/src/components/WithScroll.vue
index 24ce2e41..35397b5b 100644
--- a/src/components/WithScroll.vue
+++ b/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');
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index 52076bf9..a8593c95 100644
--- a/src/pages/Desk.vue
+++ b/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">
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index c4ac438a..0881996c 100644
--- a/src/pages/ListView/List.vue
+++ b/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 -->
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index ecbb5602..dfaf3c67 100644
--- a/src/pages/Report.vue
+++ b/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>
diff --git a/src/styles/index.css b/src/styles/index.css
index 7d14fe1a..6f4c1755 100644
--- a/src/styles/index.css
+++ b/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);
 }