From 7aa182e33decb2f20664855c4b5bfc306e93953a Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Tue, 31 Mar 2020 14:52:54 -0400
Subject: [PATCH] fix: add padding at the bottom of the layout, to accommodate
 the audio player (relates to #132)

---
 ui/src/layout/Layout.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/ui/src/layout/Layout.js b/ui/src/layout/Layout.js
index 056c8f0c..3c207206 100644
--- a/ui/src/layout/Layout.js
+++ b/ui/src/layout/Layout.js
@@ -1,14 +1,30 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { Layout } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
 import Menu from './Menu'
 import AppBar from './AppBar'
 import { DarkTheme, LightTheme } from '../themes'
 
+const useStyles = makeStyles({
+  root: { paddingBottom: '80px' }
+})
+
 export default (props) => {
+  const classes = useStyles()
   const theme = useSelector((state) =>
     state.theme === 'dark' ? DarkTheme : LightTheme
   )
 
-  return <Layout {...props} menu={Menu} appBar={AppBar} theme={theme} />
+  return (
+    <>
+      <Layout
+        {...props}
+        className={classes.root}
+        menu={Menu}
+        appBar={AppBar}
+        theme={theme}
+      />
+    </>
+  )
 }