ui: improve table view styling (#233)

treehousedev · Jul 4, 2023 · e41595b · e41595b
1 parent 1a98b3f
commit e41595b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/lib/view/table.tsx b/lib/view/table.tsx
@@ -17,7 +17,7 @@ export default {
       <table class="table-view" style={{gridTemplateColumns: `repeat(${state.fields.size+1}, 1fr)`}}>
         <thead>
           <tr>
-            <th></th>
+            <th>Title</th>
             {[...state.fields].map(f => <th>{f}</th>)}
           </tr>
         </thead>

diff --git a/web/static/app/main.css b/web/static/app/main.css
@@ -295,15 +295,22 @@ svg.node-bullet circle#node-collapsed-handle {
 
 .table-view {
   display: grid;
+  margin-bottom: calc(var(--padding)/4);
 }
 .table-view th {
+  border-bottom: solid 1px var(--color-outline-secondary);
+  margin-bottom: calc(var(--padding)/2);
+  padding-bottom: calc(var(--padding)/2);
   text-align: left;
 }
 .table-view thead,
 .table-view tbody,
 .table-view tr {
   display: contents;
 }
+.table-view thead th:first-child {
+  padding-left: 24px;
+}
 
 /*------------NOTICES------------*/
 .notice {