From 1ff9edcc3c9f2b26dca34d8ffa1c95b097b7762f Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Tue, 24 Mar 2020 18:38:56 +1300
Subject: [PATCH] Limit table styling (PR #966) to narratives

The styling introduced in #966 was global, which meant (e.g.) the tip-clicked panel display was changed (undesired side effect). This moves the CSS introduced there into the styled components used by the narratives
---
 src/components/narrative/MainDisplayMarkdown.js |  7 +++++++
 src/components/narrative/styles.js              |  7 ++++++-
 src/css/global.css                              | 13 +++++--------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/narrative/MainDisplayMarkdown.js b/src/components/narrative/MainDisplayMarkdown.js
index cc1517c7d..a67ad3824 100644
--- a/src/components/narrative/MainDisplayMarkdown.js
+++ b/src/components/narrative/MainDisplayMarkdown.js
@@ -95,6 +95,13 @@ const Container = styled.div`
     margin-bottom: 2px;
   }
 
+  table, th, td {
+    border: 1px solid;
+  }
+  td, th {
+    padding: 3px;
+  }
+
 `;
 
 const EXPERIMENTAL_MainDisplayMarkdown = ({narrativeBlock, width, mobile}) => {
diff --git a/src/components/narrative/styles.js b/src/components/narrative/styles.js
index 615407e6b..3b0fa23d8 100644
--- a/src/components/narrative/styles.js
+++ b/src/components/narrative/styles.js
@@ -1,6 +1,5 @@
 import styled, {css} from 'styled-components';
 
-
 export const NarrativeStyles = styled.div`
 
   top: ${(props) => props.narrativeNavBarHeight+"px"};
@@ -18,6 +17,12 @@ export const NarrativeStyles = styled.div`
   p, h1, h2, h3, h4, li, table {
     color: ${(props) => props.theme.unselectedColor};
   }
+  table, th, td {
+    border: 1px solid;
+  }
+  td, th {
+    padding: 3px;
+  }
 
   h1 {
     font-weight: 700;
diff --git a/src/css/global.css b/src/css/global.css
index 386dd3563..77df9e8a4 100644
--- a/src/css/global.css
+++ b/src/css/global.css
@@ -38,20 +38,17 @@ a, .link {
   font-size: 94%;
 }
 
-/* Table styles: from Bootstrap and customized */
+/* from Bootstrap */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-table, th, td {
-  border: 1px solid;
+td,
+th {
+  padding: 0;
 }
-
-td, th {
-  padding: 3px;
-}
-/* end table styles */
+/* end bootstrap */
 
 .panel th {
   text-align: left;