Fix fontSize on table header tooltips

Author: Sebastian Benjamin

jbrowse/src/client/JBrowse/VariantSearch/VariantTable.tsx

@@ -12,6 +12,7 @@ import VariantTableWidget from './components/VariantTableWidget';
 import { fetchSession } from '../utils';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import LoadingIndicator from './components/LoadingIndicator';
+import deepmerge from '@mui/utils/deepmerge';
 
 const nativePlugins = [ExtendedVariantPlugin, LogSession]
 
@@ -21,6 +22,18 @@ function VariantTable() {
     const locString = queryParam.get('location') || queryParam.get('loc')
     const refTheme = createTheme()
 
+    const themeAdditions = {
+        components: {
+            MuiTooltip: {
+                styleOverrides: {
+                    tooltip: {
+                        fontSize: '0.8rem',
+                    },
+                },
+            },
+        },
+    };
+
     if (!sessionId){
         return(<p>No session Id provided.</p>)
     }
@@ -66,7 +79,7 @@ function VariantTable() {
 
             setState(state)
             // @ts-ignore
-            setTheme(createJBrowseTheme(readConfObject(state.config.configuration, 'theme')))
+            setTheme(createTheme(deepmerge(createJBrowseTheme(readConfObject(state.config.configuration, 'theme')), themeAdditions)))
         }
 
         // NOTE: pass trackId for activeTracks, to ensure view.tracks contains it

jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx

@@ -10,7 +10,6 @@ import {
     GridToolbarDensitySelector,
     GridToolbarExport
 } from '@mui/x-data-grid';
-import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
 import SearchIcon from '@mui/icons-material/Search';
 import React, { useEffect, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
@@ -406,7 +405,7 @@ const VariantTableWidget = observer(props => {
     const renderHeaderCell = (params) => {
         return (
             <Tooltip title={params.colDef.description}>
-                <div>{params.colDef.headerName}</div>
+                <div style={{fontSize: 16}}>{params.colDef.headerName}</div>
             </Tooltip>
         );
     };