From 5c896a0152eacb19703484cce39ce670734fc8c8 Mon Sep 17 00:00:00 2001
From: Bob <uncoolbob@gmail.com>
Date: Wed, 20 Mar 2024 10:21:36 +0000
Subject: [PATCH] de-complicate .DataTable margin-bottom override

---
 .../src/components/tidytree/TreeTable.tsx     | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/libs/components/src/components/tidytree/TreeTable.tsx b/packages/libs/components/src/components/tidytree/TreeTable.tsx
index 675094961d..52f6f1e522 100644
--- a/packages/libs/components/src/components/tidytree/TreeTable.tsx
+++ b/packages/libs/components/src/components/tidytree/TreeTable.tsx
@@ -5,8 +5,7 @@ import {
 } from '../../components/tidytree/HorizontalDendrogram';
 import Mesa from '@veupathdb/coreui/lib/components/Mesa';
 import { MesaStateProps } from '../../../../coreui/lib/components/Mesa/types';
-import { css as classNameStyle, cx } from '@emotion/css';
-import { css as globalStyle, Global } from '@emotion/react';
+import { css, cx } from '@emotion/css';
 
 export interface TreeTableProps<RowType> {
   /**
@@ -54,18 +53,16 @@ export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
     () =>
       cx(
         // minimum height for table rows
-        classNameStyle`
+        css`
           height: ${rowHeight}px;
 
           & td {
- 
             &:hover {
               cursor: pointer;
               position: relative;
             }
-
           }
-	`
+        `
       ),
     [rowHeight]
   );
@@ -94,19 +91,15 @@ export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
         options={{ margin: [0, 10, 0, 10], interactive: false }}
       />
       <div
-        style={{
+        css={{
           flexGrow: 1,
           width: 1 /* arbitrary non-zero width seems necessary for flex */,
+          '.DataTable': {
+            marginBottom: '0px !important',
+            width: '80%',
+          },
         }}
       >
-        <Global
-          styles={globalStyle`
-	  .DataTable {
-	    margin-bottom: 0px !important;
-            width: 80%;
-	  }
-	`}
-        />
         <Mesa state={tableState} />
       </div>
     </div>