Fix error created by a non-menu item inside a menu

web/components/main-layout.tsx

@@ -128,18 +128,18 @@ export default function MainLayout(props) {
       </Head>
 
       <Sider width={240} className="side-nav">
+        <h1 className="owncast-title">
+          <span className="logo-container">
+            <OwncastLogo />
+          </span>
+          <span className="title-label">Owncast Admin</span>
+        </h1>
         <Menu
           defaultSelectedKeys={[route.substring(1) || 'home']}
           defaultOpenKeys={openMenuItems}
           mode="inline"
           className="menu-container"
         >
-          <h1 className="owncast-title">
-            <span className="logo-container">
-              <OwncastLogo />
-            </span>
-            <span className="title-label">Owncast Admin</span>
-          </h1>
           <Menu.Item key="home" icon={<HomeOutlined />}>
             <Link href="/">Home</Link>
           </Menu.Item>

web/styles/main-layout.scss

@@ -13,6 +13,7 @@
 
   h1.owncast-title {
     padding: 1rem;
+    padding-bottom: 4px;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -20,7 +21,9 @@
 
     .logo-container {
       background-color: var(--white);
-      padding: 0.35rem;
+      padding-top: 4px;
+      padding-right: 6px;
+      padding-left: 6px;
       border-radius: 9999px;
     }