DM's and layout fixes

src/components/layout/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useAppSelector } from '@app/hooks/useAppSelector.js';
+import { useAppSelector } from '@app/hooks/useAppSelector';
 
 import { ButtonNav } from './ButtonNav';
 import { Settings } from './Settings/Index';
@@ -15,23 +15,21 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
 
   return (
-    <div className="flex flex-grow">
-      <div
-        className={`absolute h-full w-full flex-grow flex-col pb-6 md:relative md:flex md:w-96 md:pb-0 ${
-          appState.mobileNavOpen ? 'flex' : 'hidden'
-        }`}
-      >
-        <div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
-          <div className="relative flex-grow gap-1">
-            <div className="absolute h-full w-full">{children}</div>
-            <Settings open={settingsOpen} setOpen={setSettingsOpen} />
-          </div>
-          <ButtonNav
-            toggleSettingsOpen={(): void => {
-              setSettingsOpen(!settingsOpen);
-            }}
-          />
+    <div
+      className={`absolute z-20 h-full w-full flex-grow flex-col md:relative md:flex md:w-96 ${
+        appState.mobileNavOpen ? 'flex' : 'hidden'
+      }`}
+    >
+      <div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
+        <div className="relative flex-grow gap-1">
+          <div className="absolute h-full w-full">{children}</div>
+          <Settings open={settingsOpen} setOpen={setSettingsOpen} />
         </div>
+        <ButtonNav
+          toggleSettingsOpen={(): void => {
+            setSettingsOpen(!settingsOpen);
+          }}
+        />
       </div>
     </div>
   );