column adjustment

bcgov · Mar 20, 2024 · 7dd8b9e · 7dd8b9e
1 parent cc07630
commit 7dd8b9e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/src/frontend/src/Components/events/EventsTable.js b/src/frontend/src/Components/events/EventsTable.js
@@ -239,7 +239,7 @@ export default function EventsTable(props) {
           <tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
               return (
-                <th className={header.id} key={header.id} colSpan={header.colSpan}>
+                <th className={'event-table-header ' + header.id} key={header.id} colSpan={header.colSpan}>
                   {!header.isPlaceholder && !showLoader && (
                     <span>
                       {flexRender(

diff --git a/src/frontend/src/Components/events/EventsTable.scss b/src/frontend/src/Components/events/EventsTable.scss
@@ -101,8 +101,8 @@ table {
     padding: 0 1rem;
   }
   th {
-    padding: 1rem;
-    vertical-align: middle;;
+    padding: 1rem 0 1rem 1rem;
+    vertical-align: middle;
   }
 }
 
@@ -122,23 +122,28 @@ tr.closure td.display_category .delay-icon-img {
   }
 }
 
-
+.display_category {
+  max-width: 160px;
+}
 .location_description {
  max-width: 167px;
 }
-
 .closest_landmark {
-  max-width: 165px;
+  max-width: 155px;
 }
-
 .optimized_description {
-  max-width: 284px;
+  max-width: 274px;
 }
 .last_updated {
-  max-width: 138px;
+  max-width: 128px;
 }
 .next_update {
-  max-width: 138px;
+  max-width: 128px;
+  time {
+    &:hover {
+      color: $Type-Link;
+    }
+  }
 }
 
 
@@ -173,6 +178,19 @@ td.next_update .friendly-time-text {
   }
 }
 
+.event-table-header {
+  span {
+    display: inline-block;
+    width: 100%;
+    border-right: 1px solid $Divider;
+  }
+  &:last-child {
+    span {
+      border: 0;
+    }
+  }
+}
+
 .empty-event-display {
   strong {
     margin-top: 12px;