Revise layout to avoid fill

yong-space · Aug 8, 2024 · e14de36 · e14de36
1 parent 0e9d97a
commit e14de36
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/static/main.css b/static/main.css
@@ -33,10 +33,8 @@ h1 {
 .table {
     display: grid;
     grid-template-columns: repeat(7, auto);
-    flex: 1 1 1px;
     overflow: auto;
     height: 100%;
-    border-collapse: collapse;
 }
 .table-row {
     display: contents;
@@ -50,7 +48,7 @@ h1 {
     align-items: center;
     border-right: #aaa 1px solid;
     border-bottom: #aaa 1px solid;
-    padding: .3rem;
+    padding: .3rem .5rem;
     text-wrap: nowrap;
 }
 
@@ -59,7 +57,6 @@ h1 {
 .red { color: maroon }
 .title { font-weight: 800 }
 .small { font-size: 0.8rem }
-.sorter { padding-right: .3rem }
 .table-row > div.ticker {
     flex-direction: column;
     align-items: flex-start;
@@ -80,6 +77,7 @@ h1 {
     display: flex;
     justify-content: space-between;
     font-weight: 800;
+    gap: .6rem;
 }
 .footer > div {
     font-weight: 800;

diff --git a/static/main.js b/static/main.js
@@ -37,7 +37,7 @@ const Headers = ({ sort, setSort }) => {
     };
 
     const SortSymbol = ({ field }) => html`
-        <div class="sorter ${(sort.order === 'asc') ? 'green' : 'red'}">
+        <div class="${(sort.order === 'asc') ? 'green' : 'red'}">
             ${(field !== sort.field) ? ` ` : (sort.order === 'asc') ? ' ▲' : ' ▼'}
         </div>`;