From f4f9bf70ea353d43ea26bd7f6b8060bf9e46a98c Mon Sep 17 00:00:00 2001
From: Przemek Wiech <pwiech@gmail.com>
Date: Thu, 7 Mar 2019 23:44:14 +0100
Subject: [PATCH] Hide side panel on small screens

---
 src/app.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 2fcdf6d..236a618 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -5,7 +5,7 @@ import {Details} from './details';
 import {getSelection, loadFromUrl, loadGedcom} from './load_data';
 import {IndiInfo} from 'topola';
 import {Intro} from './intro';
-import {Loader, Message} from 'semantic-ui-react';
+import {Loader, Message, Responsive} from 'semantic-ui-react';
 import {Redirect, Route, RouteComponentProps, Switch} from 'react-router-dom';
 import {TopBar} from './top_bar';
 import {TopolaData} from './gedcom_util';
@@ -158,12 +158,12 @@ export class App extends React.Component<RouteComponentProps, {}> {
             ref={(ref) => (this.chartRef = ref)}
           />
           {this.state.showSidePanel ? (
-            <div id="sidePanel">
+            <Responsive minWidth={768} id="sidePanel">
               <Details
                 gedcom={this.state.data.gedcom}
                 indi={this.state.selection.id}
               />
-            </div>
+            </Responsive>
           ) : null}
         </div>
       );