fix logo positioning

src/App.tsx

@@ -109,9 +109,12 @@ export default function App() {
                                   <Navigation
                                     title="Home"
                                     titleComponent={
-                                      <div style={{ textAlign: "center" }}>
-                                        <Logo />
-                                      </div>
+                                      <Logo
+                                        style={{
+                                          display: "block",
+                                          margin: "0 auto",
+                                        }}
+                                      />
                                     }
                                   >
                                     <HomePage />

src/assets/Logo.tsx

@@ -1,16 +1,18 @@
+import { SVGProps } from "react";
 import { useTheme } from "@material-ui/core";
 
-export default function Logo() {
+export default function Logo(props: SVGProps<SVGSVGElement>) {
   const theme = useTheme();
 
   return (
     <svg
       width="102"
-      height="33"
-      viewBox="0 -3 68 22"
+      height="32"
+      viewBox="0 -1.5 68 21"
       xmlns="http://www.w3.org/2000/svg"
       aria-labelledby="rowy-logo-title"
       role="img"
+      {...props}
     >
       <title id="rowy-logo-title">rowy</title>
 

src/components/EmptyState.tsx

@@ -71,6 +71,7 @@ export default function EmptyState({
         item
         sx={{
           maxWidth: "25em",
+          width: (theme) => `calc(100% - ${theme.spacing(2 * 2)})`,
           px: 2,
           typography: "body2",