perspective styling

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -113,6 +113,37 @@
     overflow: scroll;
   }
 
+  table {
+    /* position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 20px; */
+    overflow: scroll;
+    border-collapse: collapse;
+    outline: none;
+  }
+  th {
+    border: 1px solid var(--theme-border);
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    background-color: var(--theme-bg-1);
+    overflow: hidden;
+    vertical-align: center;
+  }
+
+  td {
+    font-weight: normal;
+    border: 1px solid var(--theme-border);
+    background-color: var(--theme-bg-0);
+    padding: 2px;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+  }
+
+/* 
   table {
     border: 1px solid;
     border-collapse: collapse;
@@ -121,5 +152,5 @@
   td,
   th {
     border: 1px solid;
-  }
+  } */
 </style>

packages/web/src/perspectives/PerspectiveView.svelte

@@ -18,6 +18,7 @@
   import PerspectiveTable from './PerspectiveTable.svelte';
   import { apiCall } from '../utility/api';
   import { Select } from 'dbgate-sqltree';
+import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
 
   export let conid;
   export let database;
@@ -108,9 +109,11 @@
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height="45%">
-        {#if root}
-          <PerspectiveTree {root} />
-        {/if}
+        <ManagerInnerContainer width={managerSize}>
+          {#if root}
+            <PerspectiveTree {root} />
+          {/if}
+        </ManagerInnerContainer>
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>